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

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

localStorage使用的当前代码实现应该有效：

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

刷新页面，然后：

localStorage.getItem('hdnvalue') \\hidden

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

Answer 2

您的代码似乎正常运作：

$(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