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

我有以下代码：

$（文档）.ready（函数（）{
$（'.pbox:gt（0）'）.hide（）；
$（'#按钮'）。在（'click'，'a'，函数（）{
$（'.current'）。不是（$（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{
背景颜色：红色
}



一个


两个


三


四


内容1
内容2
内容3
内容4
首先，我提取了将所选元素设置为其自身功能的功能：
（热提示，
id
s是唯一的。jquery中的
.data（）
，以及HTML属性；请参见函数的最后一行）

然后，我们只需检查加载时的值，并使用该值调用相同的函数（如果存在）：

    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 + '"]'))
    });

  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 + '"]'))
    });