如何解决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');
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。