Question

我创建了以下代码，以便用户可以将我网站的样式表从浅色更改为黑色。

<div class="style-changer"><span>Change Style:</span>
<button class="white" onclick="swapStyleSheet('white.css')">Light</button>
<button class="black" onclick="swapStyleSheet('black.css')">Dark</button>
</div>

<link id="pagestyle" rel="stylesheet" type="text/css" href="white.css">
<script>function swapStyleSheet(sheet){ document.getElementById('pagestyle').setAttribute('href', sheet);}</script>

当加载页面时，该代码当前将默认样式表设置为white.css，然后在单击暗按钮时将其更改为暗css。

我想要做的是让它设置一个cookie，以便站点记住按下暗按钮然后加载dark.css作为默认值，而不是像往常那样加载white.css。

如果有人可以帮我添加一些代码来做到这一点我会很感激，因为我在javascript和cookies方面有点像菜鸟。

感谢。

更新：我已经使用本地存储的一些建议制作了一些代码，但我认为我可能完全错了，这是一个链接：

https://jsfiddle.net/zy360m7m/3/

Answer 1

你有一些选择。以下是几个受欢迎的：

1）您可以使用localStorage作为缓存，该缓存会持续显示，具体取决于用户的浏览器设置。

localStorage.setItem('darkWasPressed', 'true');

localStorage.getItem('darkWasPressed'); // returns 'true'

2）非持久性替代是sessionStorage，它允许全局对象与打开的选项卡或窗口一起存在。

sessionStorage.setItem('darkWasPressed', 'true');

sessionStorage.getItem('darkWasPressed'); // returns 'true'

3）您也可以创建一个cookie。这样做很简单：

document.cookie = 'darkWasPressed=true';

然后，您可以使用＆＃34; document.cookie＆＃34;来检索它，但是获取正确的cookie和值需要进行一些解析。

4）为了使＃3更容易，我们可以使用简单的读/写库。

以下是我们如何使用记录的here库

来使用Cookie

docCookies.setItem('darkWasPressed', 'true');

docCookies.getItem('darkWasPressed'); // returns 'true'

Answer 2

尝试在JavaScript中使用本地存储。存储字符串：

localStorage.setItem('Name of Value', JSON.stringify("Your String"));

检索字符串：

var retrievedObject = JSON.parse(localStorage.getItem('Name of Value'));

Answer 3

JavaScript包含用于设置和检索用户Cookie的document.cookie API。电脑。它并不是非常复杂，我强烈建议您阅读那里的文档。

Answer 4

尽管cookies非常适合存储微小的信息，但在设置和获取其价值方面，它们很复杂。

使用localStorage可以很容易地存档。

记住按下用户按钮

4 个答案: