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

Question

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

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

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

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

該当のソースコード

<!--他の画面からお気に入りが押せる画面へ遷移するリンク-->
 <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>

$(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('お気に入り')
      }
    })

@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());
    }
  }

Answer 1

ブラウザの戻るボタンのはなしであれば、sPy2bUDOZ4uRa7t さんの回答で解決できるでしょう。

ボタンやリンクであちこち画面遷移をしたときのはなしであれば、サーバ側で「状態」を管理する必要があるでしょう。「セッション情報 引き渡し」などをキーワードにgoogleに訊くとよいかと。
管理したい「状態」や保持したい期間によっては、データベースの利用も視野に入るでしょう。

Comments

[maruru]

回答ありがとうございます！
ボタンやリンクで画面遷移をした時に、状態を管理したいので再度調べてみます！

Answer 2

HTML5のHistory APIを用いてブラウザの戻る処理をハックする | selfree
で説明されている処理を利用して、戻るボタンで戻ったときにページの初期化を実行するようにでもしたらいいのかもしれない。