checkbox：リロードでは状態保持、トリガーで状態リセット

Question

ブラウザのリロード時はcheckboxの状態を保持したいのですが、ボタンクリックで再度読み込ませた場合には状態をリセットしたいです。

<--! jsで再読み込みさせるトリガー -->
<select id="type1">
  <option value="10">カテゴリ1</option>
  <option value="11">カテゴリ2</option>
  <option value="12">カテゴリ3</option>
  <option value="13">カテゴリ4</option>
  <option value="14">カテゴリ5</option>
</select>
<input type="button" value="検索" class="select-button">

<--! 保持/リセットしたいチェックボックス -->
<div id="td1">
　　<div class="td1_reflesh">
　　　<form>
　　　<table>
　　　　<tr>
　　　　　<td width="130">
　　　　　　<input type="checkbox" name="check[]" value="0" id="img_1" data-savekey="1" class="checkbox">
　　　　　　<label for="img_1"><img src="images/button/check_outdoor.png"></label>
　　　　　</td>
　　　　　<td width="130">
　　　　　　<input type="checkbox" name="check[]" value="1" id="img_2" data-savekey="2" class="checkbox">
　　　　　　<Label for="img_2"><img src="images/button/check_indoor.png"></Label>
　　　　　</td>
　　　　　<td>
　　　　　　<input type="button" value="絞り込み" class="submit">
　　　　　</td>
　　　</tr>
　　</table>
　　</form>
　</div>
</div>

<script> 
// トリガーのクリックイベント
  $('.select-button').click(function(e){
    e.preventDefault();
    var num1 = $('#type1').val();
    _reflesh('Axis.php?type1=' + num1 );
    return false;
  });
  function _reflesh (url) {  
      var $content = $('#td1').html();
      $.ajax({
        'url': url,
        'dataType': 'html',
        'cache': false
      })
      .then(function(data) {
        // td1 リフレッシュ
        var $nextcontent = $(data).find('#td1');
        var $childcontent = $nextcontent.children('.td1_reflesh');
        $('#td1').html($childcontent);          // 書き換え
        window.history.pushState(null, null, url);
      },function(xhr, txtstat) {
        $content.html( '<p>エラーのため表示できません。</p>' );
      })
    }

// ブラウザリロード時に保持したチェックボックスの値を読み込む
function save_restore1_checkbox(target_class) {
 var cbstate;
 window.addEventListener('load', function () {
 cbstate = JSON.parse(localStorage['CBState'] || '{}');
 
  for (var key in cbstate) { 
    var el_lst = document.querySelectorAll('input[data-savekey="' + key + '"].' + target_class);
    set_checkbox_checked_all(el_lst, true);
  }
  var cb = document.getElementsByClassName(target_class);
  
  for (var c = 0; c < cb.length; c++) { 
    cb[c].addEventListener('click', function (evt) {
      var savekey = this.getAttribute('data-savekey');
      if (this.checked) {
        cbstate[savekey] = true;
      }else if (cbstate[savekey]) {
        delete cbstate[savekey];
      }
      localStorage['CBState'] = JSON.stringify(cbstate);
    });
   }
 });
 
  function set_checkbox_checked_all(el_lst, checked) {
    for (var c = 0; c < el_lst.length; c++) {
      var el = el_lst[c];
      if (el) {
        el.checked = checked;
      }
     }
  }
}
save_restore1_checkbox('checkbox');
</script>

試したこと

上記の処理ではボタンクリックで一見リセットされたように見えるのですが、ブラウザでリロードすると前の保存状態へ戻ってしまいます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

ボタンクリックで再度読

ボタンは「絞り込み」のボタンと想像しての回答ですが、
ボタンクリック後にlocalStrageの中をリセットするとどうでしょうか？

document.querySelector('.submit').addEventListener('click', function () {
  localStorage['CBState'] = "";
});

Comments

[退会済みユーザー]

回答ありがとうございます。おっしゃる通り、絞り込みです。
詳しくはselectoxでカテゴリを選択し、checkboxで絞り込む仕様になっています。
こちらのコードで実現できました。
ちなみに、リロード時はcheckboxの値保持しか考えていなかったのですが、同時にselectboxの値も保持できる方法をご存じないでしょうか。

[runnynose]

同じ要領でstorageに保存すればできると思います。

[退会済みユーザー]

ありがとうございます。
検証してみます。