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

我使用jQueryLocalStorage来记住侧栏导航菜单的切换状态，方法如下 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中没有显示，但似乎不起作用

相关html代码：

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

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

---

以下是我如何实现您的目标。请注意，我使用了一个代码片段来组织代码，但由于沙盒不允许访问本地存储，因此它无法工作。然而，你可以看到它的行动与此

/**
*功能检测+本地参考，便于使用本地存储
*if（存储）{
*setItem（'key'，'value'）；
*storage.getItem（'key'）；
* }
*/
var存储；
var失效；
变量uid；
试一试{
uid=新日期；
（storage=window.localStorage）.setItem（uid，uid）；
失败=存储。getItem（uid）！=uid；
存储。删除项（uid）；
失败&（存储=false）；
}捕获（异常）{}
/*端部特征检测+局部参考*/
$（函数（）{
if（存储）{
$（“#包装器”）.toggleClass（'isOpen'，storage.getItem（'isOpen'）=='1'）；
$（“#菜单切换”）。打开（'click'，函数（e）{
e、 预防默认值（）；
var setOpen=storage.getItem（'isOpen'）=='1'？0:1；//将open设置为当前
storage.setItem（'isOpen'，setOpen）；
$（“#包装器”）.toggleClass（'isOpen'，setOpen）；
});
} 
});
包装器：非（.isOpen）{
显示：无；
}

这里有一些内容

Hi DelightedD0D，代码在全屏上完美运行。但是，当我使用引导将屏幕大小调整为768px或更低时，jQuery切换按钮停止工作。知道为什么吗。提前谢谢。@Farizanwarden我不确定，我链接的JSFIDLE已经加载了引导程序。我试着使窗口尽可能薄（比如100px），按钮仍能正常工作。我猜在你的实际HTML中，你有另一个组件或者可能有其他CSS与按钮冲突（比如按钮上方有一个透明的div或者类似的东西），但是我不能说，在没有看到它实际发生的情况下。如果你能做一个例子来展示这种行为，我很乐意看一看。我检查了我的代码，发现有css冲突，就像你说的。添加overflow-y：自动；第28行导致切换停止工作。如果我删除了那一行，我的边栏包装背景颜色就会消失。另外，你知道当用户第一次进入我的网站时，我如何使边栏在默认情况下可见吗。谢谢这里是指向JSFIDLE的链接