LocalStorageにラジオボタンのステータスを保持させたい

Question

編集画面でラジオボタンのON,OFFの状態を、エラーなどでリロードしても保持したいです。

他のテキストボックスではLocalStorageを使っているので
LocalStorage内にラジオボタンのステータスを保存させてあげたいのですが

編集画面なので、遷移時は新規作成からDBに保存したもの表示させるようにSmaryを使っています。

これを、ON or OFFを切り替えて、エラーなどでリロードを表示させると
もちろん、すでにDBに保存されている状態に戻ります。

どうにかしてON/OFFを切り替えた際にLocalStorageへラジオボタンの状態を保存させ、
リロードなどしても反映されるようにしたいです。

<div id="on_off">
  <input type="radio" name="status" value="on" {if $list.is_published == 1}checked{/if} >ON
  <input type="radio" name="status" value="off" {if $list.is_published == 0}checked{/if} >OFF
</div>

JSは初心者レベルなので、簡単にご教示してくださいますと助かります。。。

Comments

[mather]

SmaryではなくSmartyですかね？
> ON or OFFを切り替えて、エラーなどでリロードを表示させると
> もちろん、すでにDBに保存されている状態に戻ります。
実際に切り替わってはいない状態なので正しい挙動だと思うのですが、切り替えたことを保持したい具体的な理由はなんですか？
たとえば、「フォームが長いまたは複雑で、チェックが元に戻ったことが認識できないから」という理由ならフォームをもっとシンプルにすべきですし、「入力内容エラー時の再入力要求でラジオボタンがもとに戻るのが嫌」という話ならそもそもフォームで入力しようとしている値に関してはセッション変数で管理できるはずです。

[退会済みユーザー]

typoすいません。Smartyです。
>入力内容エラー時の再入力要求でラジオボタンがもとに戻るのが嫌
こちらです。
セッション変数でやってみます。ありがとうございます。

Answer 1

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var status=localStorage.getItem('status');
  if(x=document.querySelector('[name=status][value='+status+']')) x.checked=true;
  [].forEach.call(document.querySelectorAll('[name=status]'),function(x){
    x.addEventListener('change',function(e){
      localStorage.setItem('status',e.target.value);
    });
  });
});
</script>
<div id="on_off">
  <label><input type="radio" name="status" value="on" >ON</label>
  <label><input type="radio" name="status" value="off">OFF</label>
</div>