.btns a{
background:black;
color: white;
display: inline-block;
}
.btns a.active{
background:red;
}
jQuery(function ($) {
if (sessionStorage.getItem('data_list') != null) { //webstrageがある時
var data_object = JSON.parse(sessionStorage.getItem('data_list'));
var data_list = data_object;
console.log(data_list);
Object.keys(data_list).forEach(function (key) { //webstrageにある値からボタンにclass="active"を付与
$('.btns a[data-category="' + key + '"]').addClass('active');
var val = this[key]; // value:activeを取得できる
console.log(key); // key:diary,web,manga,studyいずれか取得
}, data_list);
} else { //webstrageがない時
var data_list = {}; //連想配列を入れるための変数
}
$('.btns a').click(function (event) {
event.preventDefault();
if ($(this).is('[data-category]')) { //クリックしたリンクがカスタムデータ属性を持っているかどうか判別
var name = $(this).data("category"); //data-categoryに設定している値を取得
if (data_list[name]) { //連想配列の中に同名のkeyが存在している時
$(this).removeClass('active');
delete data_list[name]; //連想配列から同名のkeyとvalueを削除
console.log(data_list);
sessionStorage.setItem('data_list', JSON.stringify(data_list)); //連想配列をwebstrageに再登録
} else { //連想配列の中に同名のkeyが存在していない時
$(this).addClass('active');
data_list[name] = 'active'; //連想配列にkeyとvalueを追加
console.log(data_list);
sessionStorage.setItem('data_list', JSON.stringify(data_list)); //webstrageに追加
}
}
});
});
【jQuery】websseionで一つのキーに複数の値を動的に持たせる方法
2020/08/11