使用 JavaScript 的 `window.cookie` 保持 CSS 状态

Question

我发现一些漂亮的 JavaScript 可以反转我网站上的颜色，我找到了一种使用 localStorage.

来保持状态的方法

这是持久化逻辑的样子：

var isNight = localStorage['night'] || false;

if (isNight) {
   // $html is shorthand for my jQuery selected <html> tag
   $html.addClass('night');
else {
   $html.removeClass('night');
}
// further down I have code that adjusts `localStorage` everytime my button is clicked, inverting the colors

这有效，但它看起来很笨重，因为每次刷新页面时您都可以清楚地看到 CSS 变化。

有没有办法让 CSS 保持上次更改时的状态？我想我必须做的是通过 JavaScript 手动编辑 CSS 文件，这样当页面加载时它已经在那里了，但我不确定如何处理这个。

Answer 1

如果您使用 jQuery，我假设这一切都在 document.ready 内。要在用户看到任何内容之前呈现它，请有条件地在 head 元素内添加 class：

<html>
<head>
    <!-- Make sure the CSS class is added first -->
    <script>
        var isNight = localStorage["night"] || false;
        if(isNight) document.querySelector("html").className = "night";
    </script>
    <!-- Now load your stylesheet, jQuery & other scripts -->
    <link rel="stylesheet" type="text/css" href="yourstyles.css">
</head>
<body>

</body>
</html>

使用 JavaScript 的 `window.cookie` 保持 CSS 状态

Persisting CSS state using JavaScript's `window.cookie`

javascript

jquery

css

cookies

local-storage