将当前样式表保存到本地存储答案

【问题标题】：Save current stylesheet to local storage将当前样式表保存到本地存储
【发布时间】：2018-10-21 21:24:04
【问题描述】：

我知道有人问过这个问题，但没有一篇帖子能帮助我解决这个问题。

所以，事情就是这样——我的网站上有两个样式表。我想将最近使用的样式表保存到本地存储。

样式表之间的切换效果很好。

这是我的代码：

    window.onload = function() {
        var currentStylesheet = localStorage.getItem("stylesheet");
        document.getElementById("stylesheet").value = currentStylesheet;
        document.getElementById("stylesheet").setAttribute("href", currentStylesheet);
        }

我从here 获得此代码，并尝试适应我的使用，但遗憾的是 - 它没有用。我的意思是 - 它做了某事，但看起来它与样式表混淆了，而且它根本不起作用。

【问题讨论】：

首先，您不应该使用window.onload。如果您将加载另一个使用此窗口属性的脚本，它将覆盖它。请改用addEventListener()（您可以为旧版浏览器填充它）。
看看这个问题（并回答）：link
之前看到过这个，试过修改，但是失败了

标签： javascript stylesheet

【解决方案1】：

您只是忘记了Storage.setItem()。您声明要“保存”最近使用的样式表。

我认为您在这里混淆了状态的概念。在您的代码示例中，您从 localStorage 中读取值 a，但您在任何时候都没有尝试设置 localStorage。

让我们看一个最小的例子。我在下面准备了一个现场演示：

LIVE DEMO

假设你有这些文件：

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link id="active-stylesheet" href="" rel="stylesheet" type="text/css"/>
</head>

<body>
    <div class="switch-buttons">
        <button class="switch-buttons__light button" data-stylesheet="light.css">Go Light</button>
        <button class="switch-buttons__dark button" data-stylesheet="dark.css">Go Dark</button>
    </div>
    <h1>Light and Dark Stylesheets with Web Storage API</h1>
    <h2> See <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage">MDN Storage - Web Storage API</a>.</h2>
    <p>
      Click a button above. The style you select will be 'remembered' when you refresh this page. To reset this demo, click the 'Clear Storage' button.</p>
    <p>
        Faucibus interdum posuere lorem ipsum dolor sit amet, consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi? In metus vulputate eu scelerisque felis imperdiet proin fermentum leo.</p>
    <p>
        Etiam sit amet nisl purus, in mollis nunc sed id semper risus in! Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in ante metus, dictum at tempor commodo, ullamcorper?</p>
    <button id="clear-storage">Clear Storage</button>
    <script src="script.js"></script>
</body>

</html>

light.css

body {
  background-color: #fff0bc;
}

h1, h2, p {
  color: #363636;
}

dark.css

body {
  background-color: #363636;
}

h1, h2, p {
  color: #fff0bc;
}

script.js

var buttons = document.getElementsByClassName("button");
var activeSheet = document.getElementById("active-stylesheet");
var clearStorageButton = document.getElementById("clear-storage");

// Test to see if localStorage already has a value stored
if (localStorage.getItem("lastActiveSheet")) {
     activeSheet.setAttribute("href", localStorage.getItem("lastActiveSheet"));
}

// Assign the event lister to each button
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", switchStyle);  
}

// Create a button to clear localStorage
clearStorageButton.addEventListener("click", clearStorage);

// Set the #active-stylesheet to be the light or dark stylesheet
function switchStyle() {
   var selectedSheet = this.getAttribute("data-stylesheet");
   activeSheet.setAttribute("href", selectedSheet);
   localStorage.setItem("lastActiveSheet", selectedSheet);
}

// Wrapper function to localStorage.clear
function clearStorage() {
  localStorage.clear();
}

如果您希望您的应用记住最近使用的样式表，则需要将其作为值存储到 localStorage 中，以便在用户将来再次访问您的应用时使用。

正如@Hynek 所指出的，使用window.onLoad 不是一个好主意。因此，在本例中，我将事件侦听器附加到所有使用的按钮。

在此示例中，页面有两个选项可供选择：用于对比的浅色和深色主题。如果用户选择了一个主题，下次刷新页面时会记住它。

这里的关键是状态。您希望您的应用程序具有“内存”。因此，您需要将功能添加到 write、read 和 clear 内存。我建议通过MDN - Storage - Web APIs 阅读更多内容，了解如何实现这一点。在 MDN 上，还有更多的例子！

【讨论】：