js-cookieを使用して選択した要素を記憶する方法

Question

ブラウザで選択した要素を記憶しておきます。 js-cookieを使用するのは初めてのことですが、ドキュメントが非常に不足しています。私の経験不足は役に立たないので、私はここで何か助けを求めることにしました。

HTML

<ul> 
     <li class='selected' id='item1'> 
     <img src='https://dummyimage.com/100x100/000/fff'/> 
     </li> 

     <li id='item2'> 
     <img src='https://dummyimage.com/100x100/000/fff'/> 
     </li> 

     <li id='item3'> 
     <img src='https://dummyimage.com/100x100/000/fff'/> 
     </li> 
    </ul> 

CSS

ul{margin:0;padding:0} 
li{float:left;list-style-type:none} 
img{margin-left:5px} 
.selected img{border:3px solid red} 

スクリプト

$('li').on('click', function(){ 
    $(this).siblings().removeClass('selected') 
    $(this).addClass('selected'); 
}) 

は、ここで私が達成しようとしているもののJsFiddleです。 https://jsfiddle.net/cb7pf26u/3/

Answer 1

ローカルに保存したいサーバに渡す必要のないデータの場合は、ローカルストレージとクックの両方に保存する方がよいでしょう。クッキーはサーバーに要求されてしまい、リソースを無駄にする必要はありません。

ここにあなたのためのフィドルだ - あなたが本当にあなただけ$.cookie()

とのlocalStorageへの呼び出しを交換する必要がクッキーを使用したい場合 https://jsfiddle.net/denov/cb7pf26u/4/

function setStyle(node) { 
    node.siblings().removeClass('selected') 
    node.addClass('selected'); 
} 

function startup() { 
    var defaultId = 'item1'; 
     lastId = localStorage.getItem('keep_track_example') || defaultId;    

    $('li').on('click', function(){ 
     setStyle($(this)); 
     localStorage.setItem('keep_track_example', $(this).attr('id')); 
    }) 

    setStyle($('#'+lastId));  
} 


startup();