如何使用 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 + '"]'))    });