要素をクリックした時に、activeクラスを追加しつつ、ローカルストレージに情報を保存する。
<ul>
<li data-rid="1">テキストテキストテキスト</li>
<li data-rid="2">テキストテキストテキスト</li>
<li data-rid="3">テキストテキストテキスト</li>
</ul>var resultID = [];
$('li').click(function(){
var item = $(this);
if(item.hasClass('active')){
item.removeClass('active');
//情報削除して保存
for(i = 0; i < resultID.length; i++){
if(resultID[i] == item.data('rid')){
resultID.splice(i, 1);
}
}
localStorage.setItem('listData', resultID);
} else {
item.addClass('active');
//情報追加して保存
resultID.unshift(item.data('rid'));
localStorage.setItem('listData', resultID);
}
return false;
});
ページを切り替えたり再読み込みした時に、ローカルストレージデータを読みだして、activeクラスを追加する
if(localStorage.getItem('listData')){
var checkID = localStorage.getItem('listData');
var resArray = checkID.split(",");
$.each(resArray, function(i, val){
$('.resultList li[data-rid='+ val +']').addClass('active');
});
}



コメント