如何使用 cookie 保存我的 menu_toggle 设置？答案

【问题标题】：How can I save setting of my menu_toggle using cookie?如何使用 cookie 保存我的 menu_toggle 设置？
【发布时间】：2017-12-10 22:17:51
【问题描述】：

我想切换我的菜单并将其设置保存在 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();
 });

【问题讨论】：

需要cookie吗？也许 localStorage 是解决方案。参考：developer.mozilla.org/pt-BR/docs/Web/API/Window/…
这里有什么问题？您是在问如何使用 JavaScript 创建 cookie？
@RafaelGadottiBachovas 是的，我知道。但我不想将它存储在我的数据库中。这样，我必须每次从数据库中检查当前用户的设置。
@AlamzaibFarooq LocalStorage 存储在用户内存中，而不是数据库中。
@RafaelGadottiBachovas 非常感谢。 localStorage 帮了我！使用起来非常简单。非常感谢。

标签： javascript jquery html cookies toggle

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案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=/; ";
  }
});

我希望这会有所帮助。

【讨论】：