要素をクリックした時に、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'); }); }
コメント