如何使用本地存储进行活动类？

如何将选定菜单项的cookie保存在本地存储中？

菜单 –

 
Customers
 
Statics
 
payroll
  

切换活动课程 –

  $(function () { $('.nav-pills li').click(function () { $(this).siblings().removeClass('active'); $(this).addClass('active'); }); });  

使用localstorage我试过 –

  $(function () { $('.nav-pills li').click(function () { $(this).siblings().removeClass('active'); var menuactive = localStorage.setItem('mySelectValue', $(this).addClass('active'); $(this).addClass(localStorage.getItem('mySelectValue')); }); });  

现在这对我没有帮助。

如何将活动类存储在本地存储中？ 刷新页面时，我会丢失此活动类。 这个问题被多次询问，但我没有采用任何简单的方法。

Answer 1

看起来你想要记住哪个元素（最后一次，在刷新之前）有’活跃’类。

因此，如果您有已知数量的列表项，您可以只跟踪索引并存储它。

 $(function () { $('.nav-pills li').click(function () { $(this).siblings().removeClass('active'); $(this).addClass('active'); var activeIndex = $(this).index(); localStorage.setItem('mySelectValue', activeIndex); }); 

然后你可以有一个onload函数，就像这样……

  var activeIndex = localStorage.getItem('mySelectValue'); if (isNaN(activeIndex)) { console.log('nothing stored'); } else { $('.nav-pills li:nth-child('+activeIndex+')').addClass('active'); } 

Answer 2

您必须编写代码以将活动类保留在本地存储中并从本地存储中检索活动类。

 localStorage.setItem('ActiveClass', ClassName); var activeClass = localStorage.getItem('ActiveClass'); $(item).addClass(activeClass); 

如果您使用的是KnockoutJS http://knockoutjs.com/，那么您可以将部分viewModel保存在本地存储中。 这个问题讨论了这个。

如何使用离线存储和Knockout.js实现MVVM？

希望有所帮助。

Answer 3

$(this).addClass('active')将返回$(this) ，点击li的jquery版本，每次重新加载时都会更改。

您需要存储的是绝对引用，例如所单击的li的索引：