localStorage存储布尔值不生效 页面刷新后事件重复触发排查

问题根因 #

LocalStorage仅支持存储字符串类型的值，你将布尔值false转为字符串存入后，读取时拿到的是字符串"false"。而在JavaScript中，所有非空字符串做布尔转换时都会返回true，因此Boolean("false")的结果实际上是true，直接导致每次页面刷新后displayMulti都会被错误初始化为true，触发逻辑自然会重复执行。

修复方案 #

方案1：直接判断存储的字符串值 #

修改初始化逻辑，不要直接用Boolean()转换，而是判断读取到的字符串是否等于"true"：

if (window.localStorage.getItem("display_multi") != null ) {
    displayMulti = window.localStorage.getItem("display_multi") === "true"
} else {
    console.log("here")
    var displayMulti = true
}

方案2：用JSON序列化/反序列化处理存取（更通用） #

如果后续还要存储其他类型的数据（数字、对象等），可以统一用JSON处理存取逻辑，避免类型转换错误：
存入时的代码修改：

window.localStorage.setItem("display_multi", JSON.stringify(displayMulti))

读取时的代码修改：

const storedVal = window.localStorage.getItem("display_multi")
if (storedVal != null ) {
    displayMulti = JSON.parse(storedVal)
} else {
    console.log("here")
    var displayMulti = true
}

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