ronilondon ronilondon - 3 months ago 74
jQuery Question

Remember toggleClass state in local storage after page refresh JQuery

I am trying to keep the

toggleClass
value after page refresh/page load. But it is not working. I have a hierarchical table where rows are toggled when clicked. I am using
localStorage
to retain the toggle values but when page refreshed, it did not remember the previous state.

My click event is -

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


In document ready -

$(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
}
});


Update:

HTML sample -

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


Update -
JSfiddle demo

If I hide any rows and click refresh, it does not remember the toggle state. What is wrong in my code.

Thanks

Answer

You code seems working :

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

Maybe the browser you are using doesnt support Storage api

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

Did you get some errors in the console ?

EDIT

Here is the code fixed :

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