重新加載頁面時如何將活動顏色保存到本地存盤并保持選中狀態？嘗試了有關 stackoverflow 的相同案例，但對我不起作用。我不明白，不是 JavaScript 專家。希望你們，伙計們，會幫助我！
html
<div class="toolbar_item">
<p class="block mb-4 text-slate-500 text-sm">Choose shirt color</p>
<div class="flex items-center space-x-2">
<div id="1" class="color color-white active-color"></div>
<div id="2" class="color color-slate"></div>
<div id="3" class="color color-red"></div>
<div id="4" class="color color-teal"></div>
<div id="5" class="color color-blue"></div>
<div id="6" class="color color-yellow"></div>
<div id="7" class="color color-orange"></div>
</div>
</div>
JavaScript
const COLOR_BTNS = document.querySelectorAll(".color");
COLOR_BTNS.forEach((color) => {
color.addEventListener("click", () => {
let colorNameClass = color.className;
if (!color.classList.contains("active-color")) {
let colorName = colorNameClass.slice(
colorNameClass.indexOf("-") 1,
colorNameClass.length
);
resetActiveBtn();
color.classList.add("active-color");
console.log(colorName);
setNewColor(colorName);
}
});
});
// Reset Active Color
function resetActiveBtn() {
COLOR_BTNS.forEach((color) => {
color.classList.remove("active-color");
});
}
// Set New Color
function setNewColor(color) {
document.querySelector("#placeholder_depan").src =
"https://ik.imagekit.io/blabla/shirt-color/depan-" color ".png";
document.querySelector("#placeholder_belakang").src =
"https://ik.imagekit.io/blabla/shirt-color/belakang-"
color
".png";
document.getElementById("img").src =
"https://ik.imagekit.io/blabla/shirt-color/depan-" color ".png";
document.getElementById("img1").src =
"https://ik.imagekit.io/blabla/shirt-color/belakang-"
color
".png";
}
uj5u.com熱心網友回復：
保存到存盤：
if('localStorage' in this){ // this is the window, you should check it...
try{
localStorage.setItem('activeColorC',smth)
//where smth (a String !) was an
//element, color, image, class, id etc.
} catch {}
}
檢索：
// page was re-loaded…
const activeFromStorage=localStorage.getItem('activeColorC');
document.body.setAttribute('onDOMContentLoaded',` // code to
//MAKE THE REMEMBERED ELEMENT (BY A CATEGORY)
//ACTIVE AGAIN `);
uj5u.com熱心網友回復：
您應該使用Window.localStorage介面。它非常直觀且易于使用。
舉個例子，將變數保存為活動顏色：
localStorage.setItem('activeColor', 'Red');
然后，要恢復：
localStorage.getItem('activeColor');
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/510252.html
上一篇：Uncaught(inpromise)TypeError:Cannotsetpropertiesofnull(setting'innerHTML')