Checkbox状态无法从localStorage正确恢复，取消勾选后刷新仍勾选如何修复？

你的问题核心在于localStorage仅支持存储字符串类型，而prop('checked')需要接收布尔值：

• 取消勾选时，localStorage.setItem会把布尔值false自动转为字符串"false"
• 读取时拿到的字符串"false"在JavaScript中属于非空字符串，会被判定为真值，导致$(".dm-btn").prop('checked', "false")被解析为true，最终复选框始终保持勾选状态。

修复后的代码 #

$(".dm-btn").on("click", function(){
    // 用this指向当前点击的复选框，避免重复选择器
    localStorage.setItem("dm-checkbox", $(this).prop('checked').toString());
});

$(document).ready(function() {
    let dmState = localStorage.getItem("dm-checkbox");
    // 严格匹配字符串"true"来转换为布尔值，确保非"true"的情况都设为false
    $(".dm-btn").prop('checked', dmState === "true");

    if (dmState === "true"){
        console.log("checked");
    } else {
        console.log("not checked");
    }
});

关键改动说明 #

1. 类型转换修正：读取localStorage值时，通过dmState === "true"的严格判断，将字符串准确转为布尔值，避免"false"字符串被误判为真值
2. 代码优化：点击事件中使用this指向当前触发元素，比重复调用$(".dm-btn")更高效且准确
3. 显式字符串存储：调用toString()明确将布尔值转为字符串（JS会自动转换，但显式写法更清晰）

你也可以用JSON序列化的方式处理，这种方法更通用，适合后续扩展存储复杂数据：

// 存储时
localStorage.setItem("dm-checkbox", JSON.stringify($(this).prop('checked')));
// 读取时
let dmState = JSON.parse(localStorage.getItem("dm-checkbox"));

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