如何使用 jQuery/Javascript 将值保存到 localStorage

Question

我有这段代码： $(document).ready(function () {                $('.pbox:gt(0)').hide();                $('#buttons').on('click', 'a', function () {                    $('.current').not($(this).closest('li').addClass('current')).removeClass('current');                    localStorage.setItem('mySelectValue', $(this).index());                    $('.pbox:visible').hide(600);                    $('.pbox[id=' + $(this).attr('data-id') + ']').show(600);                });            });.current {  background-color:red}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><ul id="buttons">   <li>      <a data-id="div1">One</a>   </li>   <li>      <a data-id="div2">Two</a>   </li>   <li>      <a data-id="div3">Three</a>   </li>   <li class="current">      <a data-id="div4">Four</a>   </li></ul><div class="pbox" id="div1">  Content 1</div><div class="pbox" id="div2">    Content 2</div><div class="pbox" id="div3">    Content 3</div><div class="pbox" id="div4">    Content 4</div>我试图实现的是将这些值（当您单击a元素时）保存到 loaclstorage，因此当我刷新页面时，此类current不会消失。有人可以帮我解决这个问题吗？

Answer 1

首先，我提取了将所选元素设置为它自己的函数的功能：（热门提示，ids 是唯一的。在 jquery 中查找 .data()...和 HTML数据集属性；请参阅函数的最后一行）

  function setSelected($el) {

      $('.current').not($el.closest('li').addClass('current')).removeClass('current');

      localStorage.setItem('mySelectValue', $el.data('id'));

      $('.pbox:visible').hide(600);

      $('#'+ $el.data('id')).show(600);

  } 

然后，我们只需在加载时检查一个值，如果存在，就用这个值调用同一个函数：

    const localID = localStorage.getItem('mySelectValue')

    if (localID) setSelected($('[data-id="' +localID + '"]'))

最终的Javascript：

  function setSelected($el) {

      $('.current').not($el.closest('li').addClass('current')).removeClass('current');

      localStorage.setItem('mySelectValue', $el.data('id'));

      $('.pbox:visible').hide(600);

      $('#'+ $el.data('id')).show(600);

  } 

   $(document).ready(function () {

      $('.pbox:gt(0)').hide();

      $('#buttons').on('click', 'a', function () {

          setSelected($(this))

      });

      const localID = localStorage.getItem('mySelectValue')

      if (localID) setSelected($('[data-id="' +localID + '"]'))

    });