web関連
【jQuery】WebStorageを使って最後に開いたタブを開いた状態にする
以前、cookieを用いて最後に開いたタブを保存して、再度アクセスしたらそのタブが開いた状態にするということをしたけど、ブラウザに値を保存するWebStorageでまま差し替えられね?って思った時の備忘録
Memo:cookieでやったときのコードをまま使います
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> </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を使っているのブラウザ閉じると値は消える
デモも用意しているけど、まんまコピペで使えると思う
今回はsessionStorage使ってブラウザ閉じたら消えるように書いているけどコメントアウトにあるようにlocalStorageに書き換えればブラウザを閉じても値を保持できる
あ、WebStorageに保存される値って文字列になるっぽいね
if(storage_value === '1'){…}
ってしないと反応しなかった
WebStorageが保存されているかどうかの確認方法は「開発者ツール(F12)」→「Application」→「Session Storage、Local Storage」から確認できる(chrome)
個人的なメモ