记住带有 cookie 的 JavaScript答案

【问题标题】：Remember JavaScript with cookie记住带有 cookie 的 JavaScript
【发布时间】：2016-03-09 21:23:21
【问题描述】：

我正在处理单击按钮时展开的左侧菜单栏。

我想保存菜单的状态，无论它是否展开。当它刷新时，仍然必须添加类。

$('#menu-action').click(function() {
  $('.sidebar').toggleClass('active');
  $('.main').toggleClass('active');
  $(this).toggleClass('active');

  if ($('.sidebar').hasClass('active')) {
    $(this).find('i').addClass('fa-close');
    $(this).find('i').removeClass('fa-bars');
  } else {
    $(this).find('i').addClass('fa-bars');
    $(this).find('i').removeClass('fa-close');
  }
});

// Add hover feedback on menu
$('#menu-action').hover(function() {
  $('.sidebar').toggleClass('hovered');
});

【问题讨论】：

标签： javascript jquery css cookies

【解决方案1】：

试试Local Storage：

$(document).ready(function() {
    if(localStorage.getItem("active")) {
        $('.sidebar').addClass("active")
    }
});

$(window).unload(function() {
    localStorage.setItem("active", $('.sidebar').hasClass("active"));
});

并非所有浏览器都支持本地存储。请参阅上面的链接。您可以使用 store.js 之类的扩展来支持旧浏览器。

另一种选择是使用here 提到的 cookie 插件。

【讨论】：

【解决方案2】：

由于您尚未明确说明要如何读取或写入 cookie，我建议您使用js-cookie 以简化处理。使用纯 JS 处理 cookie 是可能的，但这是一项相当繁琐的任务。

使用上述库的解决方案将像这样工作（期望您在 HTML 代码之前添加了js.cookie.js）

// Store references to reusable selectors
var $menuAction = $('#menu-action');
var $menuActionI = $menuAction.find('i'); // the <i> inside #menu-action
var $sidebar = $('.sidebar');
var activeClass = 'active';

// Docs: https://github.com/js-cookie/js-cookie/tree/v2.1.0#basic-usage
var isActive = Cookies.get('site-menu-active') || false;

function toggleMenu() {
    $sidebar.toggleClass('active', isActive);
    $('.main').toggleClass('active', isActive);
    $menuAction.toggleClass('active', isActive);
    $menuActionI.toggleClass('fa-close', isActive);
    $menuActionI.toggleClass('fa-bars', isActive);

    isActive = !isActive;
    Cookies.set('site-menu-active', isActive, { expires: 7 });
 }

// Calling immediately to set to state read from cookie
toggleMenu();

// Add click interaction
$menuAction.click(toggleMenu);

// Add hover feedback on menu
$menuAction.hover(function() {
    $sidebar.toggleClass('hovered');
});

【讨论】：

【解决方案3】：

The Html5 storage is the best option for these scenario. Here you can change the localStorage to sessionStorage based on the requirement:
1)localStorage - even close the browser the data is alive
2)sessionStorage - while close the browser the data is removed
We can also remove the stored data

$('#menu-action').click(function() {
  $('.sidebar').toggleClass('active');
  $('.main').toggleClass('active');
  $(this).toggleClass('active');

  localStorage.setItem("active", $('.sidebar').hasClass('active'));

  if ($('.sidebar').hasClass('active')) {
    $(this).find('i').addClass('fa-close');
    $(this).find('i').removeClass('fa-bars');
  } else {
    $(this).find('i').addClass('fa-bars');
    $(this).find('i').removeClass('fa-close');
  }
});

$(document).ready(function(){
  if(localStorage.getItem("active")){
      $('.sidebar').addClass('active');
      $('.main').addClass('active');
      $('#menu-action').find('i').addClass('fa-close');
      $('#menu-action').find('i').removeClass('fa-bars');
  }
});

【讨论】：