记住用户的按钮按下

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，然后在单击暗色按钮时将其更改为dark css。

我想要做的是设置一个cookie，使得网站记住已经按下了暗色按钮，并将dark.css作为默认样式表加载，而不是像通常情况下加载white.css。

如果有人能帮我添加一些代码来实现这个目标，我会很感激，因为当涉及到JavaScript和cookies时，我有点新手。

谢谢。

更新：我使用一些本地存储的建议编写了一些代码，但我认为我可能完全错了，这里是链接：

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

- NGriffin

---

你尝试过如何设置cookie吗（谷歌，StackOverflow问题）？如果是，请发布您的尝试和结果。如果没有，那么现在就是开始的时候了 :) - Mackan

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';

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

4) 为了帮助简化第3步，我们可以使用一个简单的读写库。

以下是如何使用文档此处记录的库使用cookie：

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

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

- boombox

---

那非常有帮助，但我不确定自己是否完全理解了它，考虑到许多人建议使用localstorage，我使用了它，并编写了一些代码，但我认为它可能是错误的。正如我所说，我有点新手，在这里提供一个链接：https://jsfiddle.net/zy360m7m/2/ - NGriffin

你代码中的一个问题是无法使用document.getElementById()引用<link>。解决方案是创建CSS以区分黑色和白色，例如使用“black”和“white”作为类名。因此，您可以交换类而不是交换CSS文件本身。如果您真的想/需要交换CSS文件，则应该参考此链接：https://dev59.com/VnRB5IYBdhLWcg3wl4Sc。 - boombox

这是我基于你的jsfiddle快速制作的东西。单击“Light”或“Dark”按钮，看文本在“黑色”和“白色”之间变化。然后，刷新以查看使用localStorage保留文本。随意玩耍，以了解它的工作原理。https://jsfiddle.net/b7wtsn54/14/。 - boombox

你的示例非常好，但是有些令人困惑，我不太确定它是如何工作的。我想知道是否有类似的方法可以向一个id添加类，而不是添加文本，这样我就可以以类似的方式更改整个页面元素了。 - NGriffin

请查看 "classList" 的相关内容：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList。您可以使用 "add"、"remove" 和 "contains" 方法，甚至是 "toggle" 方法。 - boombox

Answer 2

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

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

获取字符串的方法：

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

- Dan12-16

Answer 3

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

- Scott

Answer 4

尽管cookie非常适合存储小量信息，但在设置和获取它们的值方面有些复杂。使用localStorage可以更轻松地实现此目标。

- Adi