Question

我正在使用一个左键菜单栏，可以点击按钮进行扩展。

如果要扩展，我想保存菜单的状态。刷新时，仍然必须添加类。

$('#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');
});

Answer 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插件。

Answer 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');
});

Answer 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');
  }
});

记住带cookie的JavaScript

3 个答案: