javascript - jQuery 切换状态在刷新时改变

Question

我查看了一些较早的问题，了解到要解决这个问题，我需要实现 cookie 并以某种方式记住状态。作为 jquery 的新手，实现这个对我来说有点棘手。

这是我的javascript代码:

$(document).ready(function(){

$('.trthJobStatus caption').click(function() {
    $('.trthJobStatus th,.trthJobStatus td').slideToggle('1000');

});
});

任何人都知道我如何使用 cookie 来记住状态并避免我的切换状态在页面刷新时改变？

提前致谢!

Answer 1

我非常喜欢使用 localStorage 而不是 cookie，尤其是当您的应用程序需要与设备无关时。请注意，下面的代码不会在不再需要时重置 localStorage var。

    $(document).ready(function(){

      if(localStorage['trthJobStatus']){
        $('.trthJobStatus th,.trthJobStatus td').slideToggle('1000');
      }
      $('.trthJobStatus caption').click(function() {
        localStorage['trthJobStatus'] = true;
        $('.trthJobStatus th,.trthJobStatus td').slideToggle('1000');
      });
    });

编辑:这是有效的解决方案!

 $(document).ready(function(){
if(window.localStorage.getItem('trthJobStatus') === 'true'){ 
  $('.trthJobStatus th,.trthJobStatus td').slideUp('1000'); } 
  $('.trthJobStatus caption').click(function(){
    if(window.localStorage.getItem('trthJobStatus') === 'true'){   window.localStorage.setItem('trthJobStatus', 'false');                                                    }else{
       window.localStorage.setItem('trthJobStatus', 'true'); 
       } 
      console.log(window.localStorage.getItem('trthJobStatus'));
    $('.trthJobStatus th,.trthJobStatus td').slideToggle('1000'); });

});