如何将选中颜色的active类存入localStorage，刷新页面后保持选中

你需要给现有代码补充localStorage的读写逻辑，就能实现刷新页面后仍保持之前选中的颜色状态。以下是修改后的完整代码和关键说明：

原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");

// 页面加载时恢复选中状态
window.addEventListener('DOMContentLoaded', () => {
    // 从localStorage读取保存的颜色
    const savedColor = localStorage.getItem('selectedShirtColor');
    if (savedColor) {
        // 找到对应颜色的元素
        const targetColorBtn = Array.from(COLOR_BTNS).find(btn => btn.classList.contains(`color-${savedColor}`));
        if (targetColorBtn) {
            resetActiveBtn();
            targetColorBtn.classList.add('active-color');
            setNewColor(savedColor);
        }
    }
});

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);
            // 保存选中的颜色到localStorage
            localStorage.setItem('selectedShirtColor', 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";
}

关键修改点说明 #

• 保存状态：在点击颜色的事件里，添加localStorage.setItem('selectedShirtColor', colorName)，把选中的颜色名存储到本地。
• 恢复状态：通过window.addEventListener('DOMContentLoaded', ...)监听页面加载完成事件，读取localStorage里的颜色值，找到对应的颜色元素，添加active-color类并更新图片。
• 容错处理：读取localStorage时先判断是否有值，避免页面首次加载时出错；同时用find方法确保能找到对应的颜色元素再执行后续操作。

内容的提问来源于stack exchange，提问作者Wildan Maulana