Question

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

这就是问题-我的网站上有两个样式表。我想将最近使用的样式表保存到本地存储中。

在样式表之间切换非常有效。

这是我的代码：

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

我从here那里获得了这段代码，并试图适应我的使用，但可悲的是-它没有用。我的意思是-它确实做了某事，但看起来好像弄乱了样式表，根本不起作用。

Answer 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上，还有更多示例！

Answer 2

@coltoneakins我想我知道您的代码如何工作。我猜我唯一有趣的部分是switchStyle函数。

好的，所以您的代码有两个样式表链接，而我的只有一个。我还有一个“更改样式”按钮。那就是我们的代码不同的地方。所以我的“样式表更改器”看起来像这样：

function ChangeMode() {
            var image = document.getElementById("mode");
            var logo = document.getElementById("logo");
            if (image.src.match("day_mode")) {
                image.src = "night_mode_s.png";
                logo.src = "logo_black.png";
                document.getElementById("stylesheet").setAttribute('href', 'main_dark.css');

            } else {
                image.src = "day_mode_s.png";
                logo.src = "logo.png";
                document.getElementById("stylesheet").setAttribute('href', 'main.css');
            }  
        }

如您所见，它会更改ID为“ stylesheet”的链接的href。

function switchStyle() {
   var selectedSheet = this.getAttribute("data-stylesheet");
   activeSheet.setAttribute("href", selectedSheet);
   localStorage.setItem("lastActiveSheet", selectedSheet);
}

据我了解，您的函数执行以下操作：1.检查当前样式表，将其设置为活动状态并将其保存到本地存储中。

所以我尝试了，然后尝试了并做了类似的事情。你猜怎么了。没用。

function MyStylesheet() {
                var currentStylesheet = localStorage.getItem("style");
                var x = document.getElementById("stylesheet").getAttribute("href");
                document.getElementById("stylesheet").setAttribute("href", x);
                localStorage.setItem("ModeChanger", x);   
                localStorage.getItem("ModeChanger");
          }

请发送帮助。

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

2 个答案: