JavaScript如何检查localStorage是否存在值，不存在时显示替代消息

问题核心原因 #

你的代码错误出在首个if分支的判断逻辑不符合JS的类型转换规则：

• localStorage中存储的所有值都是字符串类型，localStorage.getItem("users") == true 这个判断使用非严格相等==和布尔值比较时，JS会先把true转为数字1，再尝试把读取到的用户名字符串转为数字。除了字符串"1"之外，其余普通用户名、null、空字符串转换后都不等于1，所以第一个if分支的判断几乎永远为false。
• 如果用户未输入用户名时存储的是空字符串""而非null，你的else if (localStorage.getItem("users") === null) 判断也不会触发，两个分支都不命中的情况下就会出现不符合预期的展示结果。
• 另外你贴出的代码缺少函数和分支的闭合大括号，会直接抛出语法错误。

修正方案 #

直接判断读取到的用户名是否为真值即可，null、空字符串都会被判定为假值，走兜底提示分支。修正后的代码如下：

function on() {
    const userName = window.localStorage.getItem('users')
    const overlay = document.getElementById("overlay")
    overlay.style.display = "block"
    if (userName) {
        overlay.innerText = `Congratulations ${userName}! You scored the perfect 10!`
    } else {
        overlay.innerText = "Congratulations! You scored the perfect 10!"
    }
}

这样写还减少了重复的DOM查询和属性赋值逻辑，代码更简洁。

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