ボタンを選択状態にして、ローカルストレージに保存する(jQuery)

構築・開発

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

 

コメント

スポンサーリンク
タイトルとURLをコピーしました