页面刷新 JQuery 后记住本地存储中的 toggleClass 状态

Question

我试图在页面刷新/页面加载后保留 toggleClass 值。但它不起作用。我有一个分层表，单击时会在其中切换行。我使用localStorage 来保留切换值，但是当页面刷新时，它不记得以前的状态了。

我的点击事件是 -

$('tr.' + 1).toggleClass('hidden'); // Class value I am getting dynamically
localStorage.setItem('hdnvalue', 'hidden'); 

在文档中准备好 -

$(document).ready(function () {    
    if (localStorage.getItem('hdnvalue') == 'hidden') {
        alert(localStorage.getItem('hdnvalue'));
        $('tr.' + 1).toggleClass('hidden');  // I am getting class value dynamically, here 1 is the class level
    }
});

更新：

HTML 示例 -

<table id="tbl_test">
  <tr class="1">
    <td>Row 1</td>
  </tr>
  <tr class="2">
    <td>Row 1.1</td>
  </tr>
  <tr class="3">
    <td>Row 1.1.1</td>
  </tr>
  <tr class="3">
    <td>Row 1.1.2</td>
  </tr>  
  <tr class="1">
    <td>Row 2</td>
  </tr>
  <tr class="2">
    <td>Row 2.1</td>
  </tr>
  <tr class="3">
    <td>Row 2.1.1</td>
  </tr>
  <tr class="3">
    <td>Row 2.1.2</td>
  </tr>
</table>

更新 - JSfiddle demo

如果我隐藏任何行并单击刷新，它不会记住切换状态。我的代码有什么问题。

谢谢

Answer 1

您的代码似乎可以正常工作：

$(document).ready(function() {
  $('#tg1').click(function() {
    $("#result").html("toggled");
    localStorage.setItem('hdnvalue', 'hidden');
  });

  $('#tg2').click(function() {
    $("#result").html("not toggled");
    localStorage.setItem('hdnvalue', 'another');
  });

  if (localStorage.getItem('hdnvalue') == 'hidden') {
    $("#result").html("toggled");
    $('tr.' + 1).toggleClass('hidden');
  }
});

https://jsfiddle.net/qj7o4zug/

可能你使用的浏览器不支持Storage api

if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}

您是否在控制台中遇到了一些错误？

编辑

这里是固定的代码：

//$(document).ready(function() {
$('#reset').click(function(event) {
  $('tr').each(function(i, el) {
    localStorage['hdn_hiding' + i] = 'show';
  });
});

$('tr').click(function(event) {
  event.stopPropagation();
  var m_indx = $(this).index();
  var currentLevel = parseInt($(this).attr('class')),
    state = $(this).hasClass('hiding'),
    nextEl = $(this).next(),
    nextLevel = parseInt(nextEl.attr('class'));
    debugger;
  while (currentLevel < nextLevel) {
    nextEl.toggle(state);
    nextEl = nextEl.next();
    nextLevel = parseInt(nextEl.attr('class'));
  }

  var $item = $(this).closest('tr');
  var index = m_indx;

  $item.toggleClass('hiding');
  if ($item.hasClass('hiding')) {
    localStorage.setItem('hdn_hiding' + index, 'hiding');
  } else {
    localStorage.setItem('hdn_hiding' + index, 'show');
  }

});

if (typeof(localStorage) == 'undefined') {
  alert('Your browser does not support HTML5 localStorage. Try upgrading.');
} else {
  $('tr').each(function(i, el) {
    var r = localStorage['hdn_hiding' + i] == 'hiding';
    if (r) {
      var currentLevel = parseInt($(this).attr('class')),
        nextEl = $(this).next(),
        nextLevel = parseInt(nextEl.attr('class'));
      while (currentLevel < nextLevel) {
        nextEl.hide();
        nextEl = nextEl.next();
        nextLevel = parseInt(nextEl.attr('class'));
      }      
    } 
  });
}
//});

http://jsfiddle.net/ctuq3z1o

Answer 2

localStorage 使用的当前代码实现应该可以工作：

localStorage.setItem('hdnvalue', 'hidden');

刷新页面然后：

localStorage.getItem('hdnvalue') \\hidden

localStorage.getItem('hdnvalue') == 'hidden'\真