jquery - 如何使用 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 会在请求时传回服务器，无需浪费资源。

这是给你的小提琴 - 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，您只需要将对 localstorage 的调用替换为$.cookie()