JavaScript使用LocalStorage更改元素的颜色和存储

我想制作一个按钮来更改元素的颜色，并使用LocalStorage存储更改后的颜色。老实说，我是本地存储的新手，但我已经尽力了。它几乎可以正常工作，但有点问题，并且不能真正保存更改。你知道如何使它可行吗

代码：

函数markasRead（）{
var message=document.getElementById（“msgContainer”）；
var marbtn=document.getElementById（“markasread”）；
const wasRead=localStorage.getItem（'message'）='true'；
如果（！message.classList.contains（“readMsg”））{
marbtn.innerHTML=“标记为未读”；
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=“标记为已读”；
}
}
函数onloadread（）{
message.classList.toggle（'readMsg'，localStorage.getItem（'message'）='true'）；
}

#msgContainer{
背景色：红色；
}
.readMsg{
背景色：灰色！重要；
}

一些文本…

标记为已读

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

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');
  }
}

---

这几乎是我想要的，但在重新加载页面时，它应该保持更改的颜色。它应该保持更改的颜色。它在这里工作。可能会清理一次本地存储，然后再试一次。我不知道为什么，我清理了本地存储，但它仍然不能保持原色/你可能处于隐姓埋名模式吗？本地存储在匿名模式下不工作。然而，在这里你可以自己测试是的，我可以清楚地看到它在工作，但我不知道为什么它对我不起作用。也许我会用另一个浏览器或另一台电脑试试。顺便说一句，谢谢你所做的一切！