Javascript 记住用户按下的按钮

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

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

更改样式：
轻的
黑暗的
函数swapStyleSheet（sheet）{document.getElementById（'pagestyle'）.setAttribute（'href'，sheet）；}

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

我想做的是让它设置一个cookie，这样网站就会记住按下了dark按钮，然后加载dark.css作为默认值，而不是像通常那样加载white.css

如果有人能帮我添加一些代码来实现这一点，我将不胜感激，因为我在javascript和cookie方面有点不在行

谢谢

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

---

尝试在JavaScript中使用本地存储。要存储字符串，请执行以下操作：

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

要检索字符串，请执行以下操作：

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

---

JavaScript包含用于在用户计算机上设置和检索cookie的API。这并不十分复杂，我强烈建议您阅读那里的文档。

尽管cookie非常适合存储微小的信息，但它们在设置和获取值方面有点复杂

---

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

您有一些选择。以下是一些流行的：

1） 根据用户的浏览器设置，可以使用作为缓存的缓存

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

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

2） 一种非持久性的替代方法是允许全局对象在打开的选项卡或窗口中存在

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

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

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

document.cookie = 'darkWasPressed=true';

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

4） 为了简化#3，我们可以使用一个简单的读写器库

以下是我们如何使用文档库使用cookie：

---

您是否尝试过如何设置cookie（谷歌、StackOverflow问题）？如果是这样，请发布您的尝试和结果。如果没有，现在是开始的时候：）这很有帮助，但是我不确定我是否完全理解它，因为很多人建议我使用localstorage，并且我已经编写了一些代码，但我认为这可能是非常错误的。正如我所说，我有点像个傻瓜，这里有一个链接：我在代码中看到的一个问题是，不能使用document.getElementById（）用id引用。一个解决方案是创建CSS来区分黑白，使用“黑”和“白”作为类名。因此，您可以交换类，而不是交换css文件本身。如果您真的想/需要交换css文件，这应该会有所帮助：。下面是我根据您的JSFIDLE快速制作的东西。单击“亮”或“暗”按钮，可以看到文本在“黑”和“白”之间变化。然后，刷新以查看文本是否使用localStorage持久化。请随意使用它，了解它是如何工作的。您的示例非常有效，但是非常混乱，不确定它是如何工作的。我想知道你是否可以给我展示一种类似的方法，但是你没有添加文本，而是在id中添加了一个类，我可以用类似的方法来更改页面元素的整体。在“类列表”上查看这个：。您可以使用“添加”、“删除”和“包含”甚至“切换”方法。

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

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