JavaScriptで設定した値を画面遷移後も維持させる方法について

前提
Java(Spring boot)、HTML(Thymeleaf)、Javascript(Ajax、jquery)を使用し、簡単なWebサービスを構築しています。

発生している問題
Ajaxを用いて、お気に入りボタンを押すとDBへそのお気に入りを追加できる機能を作りました。
その際にJQueryを用いて、お気に入りボタンを押すとそのボタンの表示が「お気に入り」→「お気に入り解除」に切り替わる処理を作成しました。

しかし、他の画面に遷移してから再度このお気に入りボタンを押せる画面に戻ってくると「お気に入り解除」と切り替えたはずのボタンも全て「お気に入り」の表示に戻ってしまいます。

実現したいこと
他の画面に遷移して、再びお気に入りボタンを押せる画面に戻っても一度切り替えた設定を維持させる方法

該当のソースコード

html

<!--他の画面からお気に入りが押せる画面へ遷移するリンク--> <a th:href="@{/main-page}"><img class="header-logo" src="logo.png" width="80px"></a>・ ・ ・ <form th:action="@{/execute-favorite}" method="post" > <input type="submit" class="button" value="お気に入り" th:name="${article.id}" > </form>

JavaScript

$(function () { $(document).on('submit', '.favorite-button', function () { $.ajax({ url: "http://localhost:8080/execute-favorite" , type: 'POST' , dataType: 'json' , data: { _csrf: $("*[name=_csrf]").val() } , async: true }).done(function () { console.log("通信成功！！") }).fail(function () { console.log("通信失敗、、、") }).always(function () { console.log("通信終了") }) }) //ボタン表示切り替えの処理 $('.button',this).on('click', function(){ if($(this).val() === 'お気に入り'){ $(this).val('お気に入り解除') } else if($(this).val() === 'お気に入り解除'){ $(this).val('お気に入り') } })

Java

@RequestMapping("/execute-favorite")@ResponseBody public void executeFavorite(@AuthenticationPrincipal LoginUser user, Integer id) { if (favoriteService.load(user.getRegister().getId(), id).isEmpty()) { favoriteService.insert(user.getRegister().getId(), id); } else { Favorite favorite = favoriteService.delete(user.getRegister().getId(), id); favoriteService.delete(favorite.getId()); } }