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

Question

我知道有人问过这个问题，但是 none 的帖子帮助我解决了这个问题。

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

样式表之间的切换非常完美。

这是我的代码：

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

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

Answer 1

您只是忘记了 Storage.setItem()。您声明了您想要 'save' 使用的最新样式表。

我认为你在这里混淆了状态的概念。在您的代码示例中，您从 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 并不是一个好主意。因此，在此示例中，我将事件侦听器附加到所有使用的按钮。

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

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

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

Save current stylesheet to local storage

javascript

stylesheet