localStorage无法保存动态CSS背景颜色

Question

我试图在HTML上持久化一个引用按钮颜色的数组项，但它不起作用。

我的HTML:

<div class="buttons">
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>

JS:

let buttons = document.querySelectorAll("button");
let i = 0;
for (const button of buttons) {
button.style.backgroundColor = "white";
button.addEventListener("click", () => {
let colors = ["red", "yellow", "green"];
localStorage.setItem("currentColor", colors[i++ % colors.length]);
button.style.backgroundColor = localStorage.getItem("currentColor");
i++;
});
}

Answer 1

您总是在函数中执行localStorage.setItem()，它会覆盖保存的任何值。相反，您应该首先检查该值是否已经在localStorage中，如果已经，则检索它

其次，仅仅保存颜色是行不通的。如果您希望能够"；简历"；颜色的循环。或者，保存颜色，然后在从localStorage恢复颜色时定位其索引。

这是一个有效的解决方案：

const buttons = document.querySelectorAll("button");
let i = 0;
for (const button of buttons) {
button.style.backgroundColor = "white";
button.addEventListener("click", () => {
let colors = ["red", "yellow", "green"];
const saved = localStorage.getItem('colorIndex');
if (saved !== null)
i = parseInt(saved);

button.style.backgroundColor = colors[i];
if (++i == colors.length)
i = 0;
localStorage.setItem('colorIndex', i);
});
}

请注意，只有在单击按钮后，这才会恢复以前的颜色，如果要立即恢复，只需将colors和localstorage.getItem()移动到单击侦听器之外即可。

Answer 2

每次for循环时，它都会覆盖localStorage中以前的数据，所以每次localStorage中只有一种颜色。

一个简单得多的解决方案是将其存储在数组中，并让localStorage存储数组，这要容易得多，尤其是当您有需要更新的数据时。

let buttons = document.querySelectorAll("button");
let i = 0;
let storecolor = []
for (const button of buttons) {
button.style.backgroundColor = "white";
button.addEventListener("click", () => {
let colors = ["red", "yellow", "green"];
storecolor.push(colors[i++ % colors.length])
localStorage.setItem("currentColor", JSON.stringify(storecolor));
button.style.backgroundColor = JSON.parse(localStorage.getItem("currentColor"));
i++;
});
}

<div class="buttons">
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>