Question

I am using key shortcut to class toggling like below.

// Toggle admin bar using Tab + q
key('tab + q', function(){
  $('body').toggleClass('admin')
});

But I would like to store that across sessions. How will be the best way to do that?

I tried use jQuery.cookie.js

// Toggle admin bar using Tab + q
if ($.cookie('adminBarVisible') == 'false') {
  $('body').removeClass('admin')
};

key('tab + q', function(){
  if ($.cookie('adminBarVisible') == 'true') {
    $('body').removeClass('admin')
    $.cookie('adminBarVisible', false)
  } else {
    $('body').addClass('admin')
    $.cookie('adminBarVisible', true)
  };
});

But on refresh for a while (0.5sec) I see admin bar on top.

Answer 1

You can use either:

• cookies – most cross-browser solution, utilize document.cookie (or any other cookie javascript plugin out there) to access cookie value in condition when checking if something should be toggled initially. There would be additional value when using cookies, since cookies are send to your server with every request, hence making themselfs available for server side use.
• localStorage – easy to use, available on newer browsers, data is persisted accross sessions.