如何使用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

對於要保存在本地的數據，不需要傳遞給服務器，最好將其保存在localstorage vs cooke中。 cookies將被傳回服務器，並且無需浪費資源。

這裏有一個搗鼓你 - 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(); 

，如果你真的想用一個cookie，你只需要更換的調用與$.cookie()

到localStorage的