ブラウザバック時に、直前に入力したラジオボタン・チェックボックスの状態を表示させたい。

Question

ラジオボタン（製品カテゴリ）とチェックボックス（製品サイズ）にて製品を絞り込める一覧ページを構築しました。
ラジオボタン・チェックボックスによる絞り込み実装はなんとかできたのですが、遷移先ページにてブラウザの戻るボタンで一覧ページに戻った時の表示に関し、ブラウザごとに違いが出てしまいます。

Firefox：遷移直前の製品が絞り込まれた状態を表示（理想）
Chrome：各ボタンにチェックはされているが、表示されている製品が絞り込まれていない（全表示）状態が表示。
Edge：checked指定項目以外は何も選択されていない初期状態が表示

応急処置としてwindow.onpageshowを用い、ブラウザバック＝初期状態とさせて挙動を均一化させておりますが、理想としてはFirefox以外のブラウザも直前の選択状態を保持した状態で一覧ページに戻らせたいです。

色々と調べたところsessionStorageを上手く使えば実現できそうな気はしてるのですが、今回のケースに適したkeyやvalueの設定・記述方法がよく分からず、質問させていただいた次第です。

こちらの知識不足申し訳ございませんがご教示いただけますと幸いです。
何卒よろしくお願いいたします。

該当のソースコード

<!--ラジオボタン・チェックボックス-->
<form>
  <div class="search-box category_search_box">
    <label>
      <input type="radio" name="category" value="" checked="checked" class="radio_input">
      <span class="radio_btn">全ての製品</span></label>
    <label>
      <input type="radio" name="category" value="ビジネス向け" class="radio_input">
      <span class="radio_btn">ビジネス向け</span></label>
    <label>
      <input type="radio" name="category" value="一般向け" class="radio_input">
      <span class="radio_btn">一般向け</span></label>
  </div>
  <div class="search-box size_search_box">
    <label>
      <input type="checkbox" name="size" value="15インチ" class="checkbox_input">
      <span class="checkbox_parts">15インチ</span></label>
    <label>
      <input type="checkbox" name="size" value="14インチ" class="checkbox_input">
      <span class="checkbox_parts">14インチ</span></label>
    <label>
      <input id="checkAll" type="checkbox" name="size" value="" class="checkbox_input">
      <span class="checkbox_parts">全サイズ選択</span></label>
  </div>
</form>
<!--製品リスト-->
<div class="list">
  <ul class="list_item" data-category="ビジネス向け" data-size="15インチ">
    <li><a href="製品ページA"><img src="製品画像A.jpg" alt="製品A"></a></li>
    <li>
      <h2>製品A</h2>
    </li>
  </ul>
  <ul class="list_item" data-category="一般向け" data-size="15インチ">
    <li><a href="製品ページB"><img src="製品画像B.jpg" alt="製品B"></a></li>
    <li>
      <h2>製品B</h2>
    </li>
  </ul>
  <ul class="product_item list_item" data-category="ビジネス向け" data-size="14インチ">
    <li><a href="製品ページC"><img src="製品画像C.jpg" alt="製品C"></a></li>
    <li>
      <h2>製品C</h2>
    </li>
  </ul>
  <ul class="product_item list_item" data-category="一般向け" data-size="14インチ">
    <li><a href="製品ページD"><img src="製品画像D.jpg" alt="製品D"></a></li>
    <li>
      <h2>製品D</h2>
    </li>
  </ul>
</div>

<script>
var searchBox = '.search-box';
var listItem = '.list_item';
var hideClass = 'is-hide';
var checkAll = '#checkAll';
var checkBox = 'input[name="size"]';

$(function() {
    $(document).on('change', searchBox + ' input', function() {
        search_filter();
    });
});
      
$( checkAll ).on('click', function() {
    $( checkBox ).prop('checked', $(this).is(':checked') );
  });

  $( checkBox ).on( 'click', function() {
    var boxCount = $( checkBox ).length;
    var checked  = $( checkBox + ':checked' ).length;
    if( checked === boxCount ) {
      $( checkAll ).prop( 'checked', true );
    } else {
      $( checkAll ).prop( 'checked', false );
    }
  });

function search_filter() {
    $(listItem).removeClass(hideClass);
    for (var i = 0; i < $(searchBox).length; i++) {
        var name = $(searchBox).eq(i).find('input').attr('name');
        var searchData = get_selected_input_items(name);
        if(searchData.length === 0 || searchData[0] === '') {
            continue;
        }
        for (var j = 0; j < $(listItem).length; j++) {
            var itemData = get_setting_values_in_item($(listItem).eq(j), name);
            var check = array_match_check(itemData, searchData);
            if(!check) {
                $(listItem).eq(j).addClass(hideClass);
            }
        }
    }
}

function get_selected_input_items(name) {
    var searchData = [];
    $('[name=' + name + ']:checked').each(function() {
        searchData.push($(this).val());
    });
    return searchData;
}
function get_setting_values_in_item(target, data) {
    var itemData = target.data(data);
    if(!Array.isArray(itemData)) {
        itemData = [itemData];
    }
    return itemData;
}
function array_match_check(arr1, arr2) {
    var arrCheck = false;
    for (var i = 0; i < arr1.length; i++) {
        if(arr2.indexOf(arr1[i]) >= 0) {
            arrCheck = true;
            break;
        }
    }
    return arrCheck;
}
</script>

試したこと

取り急ぎ各ブラウザの挙動を統一したく、不本意ながらブラウザバック＝ページリフレッシュの対応中。

<script>
      window.onpageshow = function(){
        document.getElementById("selectForm").reset();
      };
</script>

Comments

[azuapricot]

ブラウザバック問題はよくあることですが、避けれるのであれば避けた方が良いですよね
戻るボタンを設置するとかブラウザバックを禁止するとか・・・。
cookieやセッションを使って実装したことはありますが管理が大変なのであまりおすすめできません

[taroccoli]

コメントいただきありがとうございます！
ブラウザバックとはあまり闘わない方がいい、ということなんですね。。

「戻るボタンを設置するとかブラウザバックを禁止するとか」との箇所に質問をさせてください。
history.back()を用いた戻るボタンを飛び先の各ページに設置し、そちらをクリックして一覧ページへ戻ってもらう仕様にすれば、絞り込み選択結果を保持したページに戻らせることが可能かも、ということでしょうか？
見当違いの質問でしたら申し訳ございませんが、お手すきの時にお返事いただけますと幸いです。

[azuapricot]

ブラウザ毎にそろえたいとのことだったので、戻るボタンを設置して、押下時の処理を追加で記述する方が簡単なのでは？と思っただけです（ブラウザ毎に動作確認はしてないので何とも言えませんが)

Answer 1

結局、社内プレビューにて「クリティカルな問題ではない」という判断にいたり、ブラウザバック＝ページリフレッシュのまま進行する形になりました。
コメントいただいた皆様ありがとうございました。

Answer 2

この質問内容だけでは仕様が不明瞭ですが、質問を読む限りでは sessionStorage を使うのが常套手段だろうと思います。
ただし、keyやvalueの設定・記述方法については、仕様が不明瞭なため回答できません。

ですが、keyやvalueの設定・記述方法は、そもそもわざわざ聞くようなものでもないと思います。
sessionStorage とは、とりあえずは「値の設定や取得に専用の関数を使わないといけなかったり、key と value が共に文字列に制限されていたりするだけで、中身は JavaScript のオブジェクトと同じ」と思っておけばいいです。
例えばチェックボックスの場合は、id を key、checked の値を value として保存するのが普通のやり方だろうと思います。

Comments

[taroccoli]

この度はご回答いただきありがとうございます。
「仕様が不明瞭」「keyやvalueの設定・記述方法は、そもそもわざわざ聞くようなものでもない」とのことで、私の知識の無さにより貴重なお時間とお手間を使わせてしまい、誠に申し訳ございませんでした。
webStorageを扱うにあたっては知識や実力不足であることを痛感いたしました。。
「チェックボックスの場合は、id を key、checked の値を value として保存するのが普通のやり方」と具体的なアドバイス頂戴できましたので、もう少しもがいてみようかと思います。