web関連

【jQuery】WebStorageを使って最後に開いたタブを開いた状態にする

以前、cookieを用いて最後に開いたタブを保存して、再度アクセスしたらそのタブが開いた状態にするということをしたけど、ブラウザに値を保存するWebStorageでまま差し替えられね?って思った時の備忘録

WebStorageを使って最後に開いたタブを開いた状態にするコード

軽くおさらい
WebStorageには
sessionStorage(ブラウザを閉じたら値は消える)
localStorage(ブラウザを閉じても値は消えない)
という2種類がある

<style>
.js_content{
  display: none;
}
.js_content.active{
  display: block;
}
</style>

<!-- タブの記述 -->
<div id="js_tabBtn">
  <a href="#content01" class="select_btn active">
    タブ01
  </a>
  <a href="#content02" class="select_btn">
    タブ02
  </a>
  <a href="#content03" class="select_btn">
    タブ03
  </a>
</div>

<!-- 切り替えるコンテンツ部分 -->
<div id="content01" class="js_content active">
  タブ01と紐づいているよ
</div>
<div id="content02" class="js_content">
  タブ02と紐づいているよ
</div>
<div id="content03" class="js_content">
  タブ03と紐づいているよ
</div>
<p>&nbsp;</p>
<p>読み直してみたりして試してね</p>
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>

<script>
jQuery(function($){
  var storage = sessionStorage;// ブラウザ閉じても値を保持したいときは「localStorage」に書き換え
  $('#js_tabBtn .select_btn').on('click', function(){
    if($(this).not('active')){
      $(this).addClass('active').siblings('a').removeClass('active');
      var index = $('#js_tabBtn .select_btn').index(this);
      $('.js_content').eq(index).addClass('active').siblings('div').removeClass('active');
      // ブラウザに押されたボタンのhref情報保存
      storage.setItem('language', $(this).attr("href"));
      console.log(storage.getItem('language'));
    }
  });

  // sessionStorageとlocalStorageの設定
  var storage_value = storage.getItem('language');
  console.log(storage_value);
  if (storage_value != null) {
    // クッキーを持っている時の記述
    $('#js_tabBtn .select_btn').removeClass('active');
    $("a[href='"+storage_value+"']").addClass('active');
    $(storage_value).addClass('active').siblings('div').removeClass('active');
  } 
});
</script>
デモ
sessionStorageを使っているのブラウザ閉じると値は消える

デモも用意しているけど、まんまコピペで使えると思う
今回はsessionStorage使ってブラウザ閉じたら消えるように書いているけどコメントアウトにあるようにlocalStorageに書き換えればブラウザを閉じても値を保持できる

あ、WebStorageに保存される値って文字列になるっぽいね
if(storage_value === '1'){…}ってしないと反応しなかった

WebStorageが保存されているかどうかの確認方法は「開発者ツール(F12)」→「Application」→「Session Storage、Local Storage」から確認できる(chrome)
個人的なメモ

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。