求助：使用jQuery结合LocalStorage保存背景色选择状态失败

我希望为背景色选择功能添加LocalStorage功能，使页面刷新或关闭后仍能记住用户所选的背景色。但编写的以下代码无法正常工作，恳请帮忙排查问题：

HTML代码 #

<div class="d-flex align-items-center me-4">
    <span class="input-group-text d-inline-flex">Màu nền</span>
    <div class="ms-2">
        <button class="border border-dark btn btn-primary p-3 btn-background" id="blue" data-value="blue"></button>
        <button class="border border-dark btn btn-light p-3 btn-background" id="white" data-value="white"></button>
        <button class="border border-dark btn btn-success p-3 btn-background" id="green" data-value="green"></button>
        <button class="border border-dark btn btn-warning p-3 btn-background" id="gold" data-value="gold"></button>
        <button class="border border-dark btn btn-danger p-3 btn-background" id="red" data-value="red"></button>
    </div>
</div>

jQuery代码 #

$(document).ready(function () {

    /* =============================== BACKGROUND COLOR =================================*/
    $(".btn-background").click(function () {
        var btnBackGround = $(this).attr('data-value');
        console.log(btnBackGround);

        var btnBG = JSON.parse(localStorage.getItem("btnBG")) || [];
        btnBG.push({
            btnBG: btnBackGround
        })

        $(".btn-background").each(function () {
            if (btnBackGround == "blue") {
                $("#content").css("background-color", "blue");
            }

            if (btnBackGround == "white") {
                $("#content").css("background-color", "white");
            }

            if (btnBackGround == "green") {
                $("#content").css("background-color", "green");
            }

            if (btnBackGround == "gold") {
                $("#content").css("background-color", "gold");
            }

            if (btnBackGround == "red") {
                $("#content").css("background-color", "red");
            }
            localStorage.setItem("btnBG", JSON.stringify(btnBG));
        })
    })

})

问题分析 #

1. 数据结构冗余：用数组存储选中的颜色完全没必要，我们只需要记录当前单个选中的颜色即可，数组结构会增加读取和存储的复杂度。
2. 无效循环操作：点击事件里遍历所有背景色按钮，重复执行5次背景色设置和LocalStorage存储，属于冗余操作，浪费性能。
3. 缺失初始化逻辑：页面加载时没有从LocalStorage读取保存的颜色并应用到#content，导致刷新后无法恢复之前的设置。

修复后的代码 #

$(document).ready(function () {
    /* =============================== BACKGROUND COLOR =================================*/
    // 页面初始化时读取LocalStorage并应用保存的背景色
    const savedColor = localStorage.getItem("btnBG");
    if (savedColor) {
        $("#content").css("background-color", savedColor);
    }

    // 背景色按钮点击事件
    $(".btn-background").click(function () {
        const selectedColor = $(this).attr('data-value');
        
        // 设置背景色
        $("#content").css("background-color", selectedColor);
        // 直接存储颜色字符串到LocalStorage
        localStorage.setItem("btnBG", selectedColor);
    })
})

修复说明 #

• 简化存储结构：直接将选中的颜色字符串存入LocalStorage，无需数组，读取和存储逻辑更简洁。
• 移除无效循环：点击事件只处理当前按钮的颜色，一次完成背景色设置和存储操作，避免冗余执行。
• 添加初始化逻辑：页面加载时优先读取LocalStorage中的颜色，若存在则直接应用，实现刷新后保留用户设置的效果。

内容的提问来源于stack exchange，提问作者Guar Dian