我試圖在我的 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 ;
});
}
uj5u.com熱心網友回復：
你總是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()點擊偵聽器之外。
uj5u.com熱心網友回復：
每次for回圈回圈時，它都會覆寫 中的先前資料localStorage，因此每次您將只有 1 種顏色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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/418304.html
標籤：