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元素中添加类：

<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`的持久XSS状态

1 个答案: