JavaScript 更改元素颜色并使用 LocalStorage 存储答案

【问题标题】：JavaScript change elements color and store with LocalStorageJavaScript 更改元素颜色并使用 LocalStorage 存储
【发布时间】：2021-04-19 09:13:01
【问题描述】：

我想制作一个按钮来更改元素颜色并使用 LocalStorage 存储更改后的颜色。老实说，我是 LocalStorage 的新手，但我已尽力而为。它几乎可以工作，但有点错误，并没有真正保存更改。知道如何使它可行吗？

代码：

function markasRead() {

    var message = document.getElementById("msgContainer");
    var marbtn = document.getElementById("markasread");

    const wasRead = localStorage.getItem('message') === 'true';

    if (!message.classList.contains("readMsg")) {
        marbtn.innerHTML = "Mark as unread";
        localStorage.setItem('message', !wasRead);
        message.classList.toggle("readMsg", !wasRead);
    } else if (message.classList.contains("readMsg")) {
        message.classList.remove("readMsg");
        message.classList.toggle("readMsg", wasRead);
        marbtn.innerHTML = "Mark as read";
    }

}

function onloadread() {
    message.classList.toggle('readMsg', localStorage.getItem('message') === 'true');
}

#msgContainer {
  background-color: red;
}

.readMsg {
    background-color: gray !important;
}

<body onload="onloadread()">
<div id="msgContainer">
Some text...<br>
<button id="markasread" onclick="markasRead()">Mark as read</button>
</div>
</body>

【问题讨论】：

标签： javascript html css local-storage onload

【解决方案1】：

试试这段代码，告诉我，如果这是你想要实现的目标。

function markasRead() {
  const message = document.getElementById("msgContainer");
  const marbtn = document.getElementById("markasread");
  const wasRead = JSON.parse(localStorage.getItem('message'));
  if (!wasRead || wasRead === false) {
    marbtn.innerHTML = "Mark as unread";
  } else {
    marbtn.innerHTML = "Mark as read";
  }
  localStorage.setItem('message', !wasRead);
  message.classList.toggle("readMsg");
}

function onloadread() {
  const message = document.getElementById("msgContainer");
  const marbtn = document.getElementById("markasread");
  if(JSON.parse(localStorage.getItem('message'))) {
    marbtn.innerHTML = "Mark as unread";
    message.classList.toggle('readMsg');
  }
}

【讨论】：

这几乎是我想要的，但重新加载页面时它应该保持更改的颜色。
它应该保持颜色变化。它在这里工作。也许清理一次你的本地存储，然后再试一次。
我不知道为什么，我清理了 LocalStorage 但它仍然没有保持 chenged 的颜色。 ://
您是否处于隐身模式？本地存储在隐身模式下不起作用。不过，在这里你可以自己测试一下jsfiddle.net/0n7629wk
是的，我可以清楚地看到它正在工作，但我不知道为什么它对我不起作用。也许我会用另一个浏览器或另一台电脑试试。顺便说一句，谢谢你所做的一切！