JavaScript 更改元素颜色并使用 LocalStorage 进行存储

问题描述

我想制作一个按钮来更改元素颜色并使用 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>

解决方法

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

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

html javascript local-storage