javascript - 使用 jquery 设置 cookie，在页面加载时从 cookie 设置 bodyclass

Question

我有一个按钮可以将 body class 设置为 .blackout

我正在使用 js-cookie设置cookie，下面的代码与我的按钮相关联。

<script>
$('#boToggle').on('click', function(e) {
  $('body').toggleClass('blackout'); 
});
</script>

我想不通的是如何使用上面链接中的 Cookies.set('name', 'value'); 设置带有 .toggleClass 的 cookie 以及如何检索它来自 cookie 并将其应用于 body 类。

提前致谢!

Answer 1

看起来您想在 session 之间维护切换类的状态，这可以使用 Cookie 来完成，但可能更适合 localStorage。

为了完整起见，我将演示这两种方法

使用 Cookie

要更好地理解 Cookie 和本地存储之间的区别，请参阅此 question ，但老实说，我认为您可以采用任何一种方法。在这种情况下，本地存储相对于 cookie 的一个优势是您不需要额外的库。

let state = Cookies.get('toggle');
$(body).toggleClass('.blackout', state)

使用本地存储

let state = localStorage.getItem('toggle');
$(body).toggleClass('.blackout', state)

使用您更新的代码段

var toggleLocalStorage = localStorage.getItem('toggle');
var toggleStatus = toggleLocalStorage ? toggleLocalStorage : false;

$('#boToggle').on('click', function(e) {
  $('body').toggleClass('blackout', toggleStatus);
  localStorage.setItem('toggle' toggleStatus);
});