记住用户按钮按下答案

【问题标题】：Remembering a users button press记住用户按钮按下
【发布时间】：2015-06-25 13:13:50
【问题描述】：

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

<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 和 cookie 方面有点菜鸟。

谢谢。

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

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

【问题讨论】：

您是否尝试过如何设置 cookie（谷歌，StackOverflow 问题）？如果是这样，请发布您的尝试和结果。如果没有，现在是时候开始了:)

标签： javascript html cookies

【解决方案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 更容易，我们可以使用一个简单的读取器/写入器库。

以下是我们如何使用记录在 here 中的库来使用 cookie：

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

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

【讨论】：

这很有帮助，但是我不确定我是否完全理解它，因为很多人建议我使用 localstorage，并编写了一些代码，但我认为它可能相当错误的。正如我所说，我有点菜鸟，这里有一个链接：jsfiddle.net/zy360m7m/2
我在您的代码中看到的一个问题是，无法通过使用 document.getElementById() 使用 id 引用。一个解决方案是创建 CSS 来区分黑色和白色，使用“黑色”和“白色”之类的名称作为类名。因此，您可以交换类而不是交换 css 文件本身。如果您真的想要/需要交换 css 文件，这应该会有所帮助：stackoverflow.com/questions/574944/….
这是我根据您的 jsfiddle 快速制作的内容。单击“浅色”或“深色”按钮，然后查看文本在“黑色”和“白色”之间的变化。然后，刷新以查看文本是否使用 localStorage 保留。随意玩弄它以了解它是如何工作的。 jsfiddle.net/b7wtsn54/14.
您的示例效果很好，但是非常令人困惑，不确定它是如何工作的。我想知道您是否可以向我展示类似的方法，但不是添加文本，而是向 id 添加了一个类，我可以使用类似的方法以类似的方式更改整个页面元素。
在“classList”上查看：developer.mozilla.org/en-US/docs/Web/API/Element/classList。您可以使用“添加”、“删除”和“包含”甚至“切换”方法。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

检索字符串：

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

【讨论】：