使用 jquery localStorage 时，侧边栏导航出现然后在页面加载时消失

Question

我正在使用 jQuery localStorage 来记住侧边栏导航菜单的切换状态，方法如下 jQuery代码：

$('#wrapper').toggleClass(window.localStorage.toggled);
$('#menu-toggle').on('click',function(e)
{
    e.preventDefault();
    if (window.localStorage.toggled != "toggled" ) 
    {
        $('#wrapper').toggleClass("toggled", true );
        window.localStorage.toggled = "toggled";
    } 
    else 
    {
        $('#wrapper').toggleClass("toggled", false );
        window.localStorage.toggled = "";
    }
});

通过记住切换状态，代码可以正常工作。刷新页面时会出现问题。侧边栏导航菜单先出现然后消失。我已经尝试在 css 中设置 display:none 但它似乎不起作用。

相关html代码：

<a href="#menu-toggle" class="btn btn-default" id="menu-toggle"><span class="glyphicon glyphicon-th-list"></span></a>

<div id="wrapper">
</div>

Answer 1

以下是我将如何实现您的目标。请注意，我使用了 sn-p 来组织代码，但由于沙盒不允许访问本地存储，因此它不适用于 SO。但是，您可以看到它的实际效果..

Working jsFiddle

/**
 * Feature detect + local reference for simple use of local storage
 * if (storage) {
 *    storage.setItem('key', 'value');
 *    storage.getItem('key');
 * }
 */
var storage;
var fail;
var uid;
try {
  uid = new Date;
  (storage = window.localStorage).setItem(uid, uid);
  fail = storage.getItem(uid) != uid;
  storage.removeItem(uid);
  fail && (storage = false);
} catch (exception) {}
/* end  Feature detect + local reference */

$(function() {

  if (storage) {
    $('#wrapper').toggleClass('isOpen', storage.getItem('isOpen') == '1');
    $('#menu-toggle').on('click', function(e) {
      e.preventDefault();
      var setOpen = storage.getItem('isOpen') == '1' ? 0 : 1; // set opento the oposite of current
      storage.setItem('isOpen', setOpen);
      $('#wrapper').toggleClass('isOpen', setOpen);
    });
  } 
  
});

#wrapper:not(.isOpen) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle"><span class="glyphicon glyphicon-th-list"></span></a>

<div id="wrapper">
  some content here
</div>