ページネーションでcheckedを保持したい

Question

ページネーションやリロード時に選択したラジオボタンのチェック状態をjavascript/jqueryで保持したままにしたいです。
sessionStorageを使ってできるようにしたいと思っています。
現状はsetItemでcheckedのtrue値を保存しています。
これをページ遷移された際に選択されていたラジオボタンにcheckedとしたいのですが、
わかりません。
よろしくお願いします。

<input type="radio" id="ic_list" name="view">
<input type="radio" id="ic_tile" name="view">

    $('input[name="view"]').on('click',function(){
      var v = $(this).prop('checked');
      sessionStorage.setItem('key', v);
    });

Comments

[yambejp]

複数のformに同じ名前のラジオボタンがある場合は競合処理が必要ですが、想定する必要はありませんか？

[yc-www10]

他で同じ名前のラジオボタンは使用しておりません。
よろしくお願い致します。

Answer 1

ざっくりこんな感じで

<script>
const ss=sessionStorage;
window.addEventListener('DOMContentLoaded', ()=>{
  for(let i=0;i<ss.length;i++){
    const n=ss.key(i);
    const v=ss.getItem(ss.key(i));
    console.log([n,v]);
    document.querySelector(`[name="${n}"][value="${v}"]`).checked=true;
  }
});
document.addEventListener('reset',()=>{
  ss.clear()
});
document.addEventListener('change',()=>{
  Array.from(new Set([...document.querySelectorAll('[type=radio]')].map(x=>x.name)),x=>{
    const v=document.querySelector(`[name="${x}"]:checked`)?.value??null;
    v===null?ss.removeItem(x):ss.setItem(x,v);
  });
});
</script>
<form>
<label><input type="radio" name="view1" value="1">1</label>
<label><input type="radio" name="view1" value="2">2</label>
<label><input type="radio" name="view1" value="3">3</label><br>
<label><input type="radio" name="view2" value="1">1</label>
<label><input type="radio" name="view2" value="2">2</label>
<label><input type="radio" name="view2" value="3">3</label><br>
<input type="reset" value="reset">
</form>

※ちょこちょこ整形

Comments

[yc-www10]

回答ありがとうございます。

[yambejp]

一部見苦しい箇所なおしておきました

[yc-www10]

ありがとうございます。