如何使用Cookie保存menu_toggle的设置？

Question

我想切换菜单并将其设置保存在cookie中。 这是我的Jquery代码的切换按钮：

我的HTML

  <div class="nav toggle">
  <a id="menu_toggle"><i class="fa fa-bars"></i></a>
  </div>

我的密码

 var $MENU_TOGGLE = $('#menu_toggle')
 $MENU_TOGGLE.on('click', function() {
    console.log('clicked - menu toggle');

    if ($BODY.hasClass('nav-md')) {
        $SIDEBAR_MENU.find('li.active ul').hide();
        $SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
    } else {
        $SIDEBAR_MENU.find('li.active-sm ul').show();
        $SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
    }

$BODY.toggleClass('nav-md nav-sm');

setContentHeight();
 });

Answer 1

我用localStorage解决了我的问题。 这是在本地存储设置的非常简单的方法。 我添加这两行。

这是我的代码：

 localStorage.setItem('Menu', 'Mini');

 localStorage.setItem('Menu', 'Larg');

然后我在页面中添加了如下脚本：

<script>
if (localStorage.Menu === 'Mini') {
    $("body").addClass('nav-sm');

} else {
    $("body").addClass('nav-md');
}
</script>

Answer 2

document.cookie = "togglesetting=John Doe; expires=Thu, 18 Dec 2017 12:00:00 UTC";

您可以将设置信息放入cookie中的任何键值模式。

我的建议是在其中放置一个json并从cookie中读取togglesetting键，而不是适当地设置toogle菜单

Answer 3

我刚刚在今天早些时候为我正在构建的网站写过这篇文章。 我的首选方法是将cookie检查添加到头部。 这会将一个类添加到可以附加样式的html中。

<script type="text/javascript">
  if (document.cookie.replace(/(?:(?:^|.*;\s*)hasClosedMenu\s*\=\s*([^;]*).*$)|^.*$/, "$1") == false) {
    document.documentElement.className += " menu-open "
  }
</script>

在下面，您将找到设置cookie的功能，该功能确定菜单是否打开。

$('.menu-toggle').on('click',function(){
  $('html').toggleClass('open-menu');
  if ($('html').hasClass('open-menu')){
    document.cookie = "hasClosedMenu=; max-age=0; domain="+window.location.hostname+"; path=/; ";
  } else {
    document.cookie = "hasClosedMenu=true; max-age=864000; domain="+window.location.hostname+"; path=/; ";
  }
});

我希望这有帮助。