ページを進む、戻るをしても状態を保持する

Question

下記のように、金額範囲を選択するを選択した場合、Jqueryで追加の選択肢が現れそこでまた、諸々選択するUIになっております。

1.ページを進む、戻るを行った場合、金額範囲を選択するのセレクトボタンしか残らず、その後の追加の選択肢が一度消えてしまいます。その状態でまた金額範囲を選択するのセレクトボタンを操作すると一度入力した値は戻って聞きます。
これがUIとしては不親切であるため、一度金額範囲を選択するを選択し、その後の追加の選択肢を入力した場合、ページを進む、戻るしてもその状態を保存していたいのですが、方法はございますでしょうか？

2.加えて、ページをリロードした場合には、当然これらの情報はすべてブラウザから消えてしまい、選択肢も初期化されてしまうのですが、リロードしても状態を保存させておく方法はJS上ございますでしょうか？

よろしくお願い申し上げます。

  <h3>金額範囲の設定</h3>
        <p>
          <input class="spec" type="radio" name="moneyChoice" value="yes">金額範囲を選択する
          <br>
          <input class="spec" type="radio" name="moneyChoice" value="no" checked>金額範囲を選択しない
        </p>

        <div id="moneyRange">


        <input type="text" name="median" id="median" class="money" style="text-align:right; " name="" value="" placeholder="目安金額（中央値）を入力">
        <input type="text" name="step" id="step" class="money" style="text-align:right; " name="" value="" placeholder="ステップ金額（階段値）を入力">
        <br>
        <select name="max" id="max" size=1 disabled style="width:300px;text-align:right;">
          <option value=""></option>
          <option value=""></option>
          <option value=""></option>
          </select>
          <br>
        <span>下限値は</span>
        <span id="min"></span>
        <input id="min2" name="min" type="hidden" name="" value="">
      </div>

$(function(){
  $('#median,#step').on('change',function(){
    $('#max').find('option').remove();
    $('#max').prop('disabled', true);
    var median=parseInt(($('#median').val()).replace(/,/g,""));
    var step=parseInt(($('#step').val()).replace(/,/g,""));
    if (isNaN(median) || isNaN(step) || step == 0) {
             $('#min').text('');
             return;}
    var maxChoice= Math.floor(median*2/step);
    var flg=median>0 && step>0;
    $('#max').find('option').remove();
    for(var i=1; i<=maxChoice; i++){
      var num=flg? median+(step*i):'';
      $('#max').append($('<option>').val(num).text(num));
    }
    $('#max').prop('disabled',!flg);
if ((median-step)>=0) {
  $('#min').text(median-step);
  $('#min2').val(median-step);
}else{
  $('#min').text(0);
  $('#min2').val(0);
}
  }).trigger('change');


   $('#max').change(function(){
     var median=parseInt(($('#median').val()).replace(/,/g,""));
     var max=$('#max').val();
     var bottom= median-(max-median);
    if (bottom<0) {
      $('#min').text(0);
      $('#min2').val(0);
    }else{
     $('#min').text(bottom)
     $('#min2').val(bottom);
   };
   });
});

Answer 1

ソースコードを拝見した感じ，既にjQueryで作るのがつらいレベルになってきていますね。Vue.jsかReactでSPA(Single Page Application)にしましょう。この系統のものはそもそもページ遷移が発生しないという特長を持っています。TwitterやFacebookを思い浮かべてみてください。

Comments

[mpyw]

尤も，「サーバサイドも含めてほとんど全部作り直せるなら」という前提での回答であり，もし「今回はそこまで要求しないのでとりあえず完成させたい」程度のものでしたらスルーしてください。普通にlocalStorageかsessionStorageに保持する程度でいいと思います。（但し，ずっとこのやり方で機能追加を続けていくといつか破綻します）

[pegy]

ご回答ありがとうございます。
ご助言いただいた方法も参考にさせて頂きます。
因みにですが、sessionやlocalstrageに値を保存できるとして、changeではなく、どのようなイベントで値を取得し表示させるのが一般的でしょうか？
宜しくお願い申し上げます。

[mpyw]

jQueryベースでやるならchangeが一般的，というか他に使えそうなイベントが無いような…

Vue.jsでやるなら双方向データバインディングなので，JavaScriptの変数とフォームの値が最初に宣言しておくだけで勝手に同期されますね。ぶっちゃけこれが一番ラクです。（また最初に言ったようにページ遷移は発生しないので保存処理を考える必要がありません，変数はブラウザを閉じない限りはずっと保持されます）

[pegy]

ご回答ありがとうございます。
見返したら私の差し上げた質問の方法に問題がありました。申し訳ございません。
画面が戻った時に追加の選択肢は消えるが値は残っている状態であるとして、これを戻ったという行為をトリガーにして同じような表示(例えば下記の例ではapendしたoptionを表示した状態にする)にすることは可能なのでしょうか？
度々すみません、ご迷惑かと思うのでこれで最後に致します。
宜しくお願い申し上げます

[mpyw]

window.onbeforeunload - Web API インターフェイス | MDN https://developer.mozilla.org/ja/docs/Web/API/WindowEventHandlers/onbeforeunload

「今戻ろうとしている」というイベントをハンドルすることはできます。（但し「戻る」「進む」「閉じる」を区別できない）

[mpyw]

onbeforeunloadよりonunloadのほうが適切かもしれません，ユースケースに応じて選択してください。onbeforeunloadはreturnする値によってダイアログを出すことができ，ユーザの選択次第でページ遷移がキャンセルされます。onunloadはページ遷移が確定した直後に実行されます。

[pegy]

コメントありがとうございます。また、最後までお付き合いを頂き深謝を申し上げます。どちらも試してみます。
宜しくお願い申し上げます。

Answer 2

localStorage に保存して、ページ読み込み時に確認したらどうでしょう。

【Window.localStorage - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage

【localStorageで複数のデータを保存する ｜ Tips Note by TAM】
https://www.tam-tam.co.jp/tipsnote/javascript/post5978.html

Comments

[pegy]

ご回答ありがとうございます。一点疑問があるのですが、ページを進む、戻るをした場合、金額範囲を選択するの、金額範囲を選択しないのselectしか表示されませんが、またchangeをすると、一度入力したそれ以下の追加入力データはもどってきます。とするとリロードは別として、進む、戻るの場合、ブラウザは状態は保存しており表示上の問題かと考えていたのですが、そのような認識には誤りがあるのでしょうか？
つまり、一旦入力された場合はchangeではないトリガーで、処理を分岐させる程度に考えておりましたが、如何でしょうか？
宜しくお願い致します

[kei344]

そもそもリロードの対策を考えるのであれば、「進む、戻る」のためだけに別コードを考えるのは手間なだけかと思います。また、「進む、戻る」はブラウザによって挙動が違ったような気もします。

[pegy]

コメントありがとうございます、承知を致しました。

[mpyw]

Chromeは気を効かせてフォームの内容保持してくれますよね

[kei344]

To: mpywさん
Cache-Control or http-equiv="Expires" で保存するかを判断しているらしいです。（未検証）
で、IE10+は特定条件下でそれも無視して消すことがあるようです。

【ニューヨークITブログ » HTMLのFormへ、戻るボタン(Back)で戻ると内容が消える問題】
http://mirai-it.com/blog/?p=677

【IE11で入力フォームの値がhistory.backで消える不具合に関して | IT関連 | のりべーす】
http://www.noribase.net/2016081358