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

Question

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

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

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

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

提前致谢！

Answer 1

您似乎想在会话之间保持切换 class 的状态，这可以通过 Cookie 完成，但可能更适合 localStorage。

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

有 Cookies

要更好地理解 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);
});

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

set cookie using jquery, bodyclass from cookie on page load

javascript

css

cookies

jquery

document-body