在页面加载时使用jquery，来自cookie的bodyclass设置cookie

Question

我有一个按钮，它将body类设置为.blackout

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

extern

我无法弄清楚如何使用上面链接中的<script> $('#boToggle').on('click', function(e) { $('body').toggleClass('blackout'); }); </script> 来设置带有.toggleClass的cookie以及如何从cookie中检索它并将其应用到body类。

提前致谢！

Answer 1

看起来你想要在会话之间保持切换类的状态，这可以通过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);
});