如何在if函数中引入localStorage？sessionStorage代码无法运行求助

一、代码无法正常运行的原因及修复 #

你的代码大概率因为类型不匹配导致条件不成立：sessionStorage.getItem()返回的是字符串类型，而你用严格相等===和数字5比较，"5" === 5结果是false，所以代码块不会执行。另外还要确保代码在DOM加载完成后执行，否则getElementById可能找不到元素。

修复后的代码示例：

// 确保DOM加载完成后执行代码
document.addEventListener('DOMContentLoaded', function() {
    // 将取出的字符串转为数字，同时处理值不存在的情况
    const countWon = parseInt(sessionStorage.getItem("countWon"), 10);
    if(countWon === 5) {
        const gameElement = document.getElementById("game");
        const rightElement = document.getElementById("right");
        // 先检查元素是否存在，避免报错
        if(gameElement && rightElement) {
            gameElement.style.display = "none";
            const won = document.createElement("h1");
            won.innerHTML = "You won!";
            won.style.color = "green";
            rightElement.appendChild(won);
        }
    }
});

额外注意点：

• 用parseInt或Number()转换存储的值为数字，parseInt建议指定第二个参数10确保十进制解析
• 先检查DOM元素是否存在，避免因元素不存在导致后续代码报错
• 代码要在DOM加载完成后执行，比如放在DOMContentLoaded事件中，或者直接写在页面底部

二、在if判断中引入localStorage的方法 #

localStorage和sessionStorage的API几乎一致，区别仅在于localStorage的数据会持久化存储（除非手动清除），而sessionStorage仅在当前浏览器会话有效。

直接替换sessionStorage为localStorage即可，同样要注意类型转换：

document.addEventListener('DOMContentLoaded', function() {
    const countWon = parseInt(localStorage.getItem("countWon"), 10);
    if(countWon === 5) {
        const gameElement = document.getElementById("game");
        const rightElement = document.getElementById("right");
        if(gameElement && rightElement) {
            gameElement.style.display = "none";
            const won = document.createElement("h1");
            won.innerHTML = "You won!";
            won.style.color = "green";
            rightElement.appendChild(won);
        }
    }
});

如果需要设置localStorage的值，用法如下：

// 存储时可以直接存数字，但取出时仍是字符串，建议统一存字符串或取出时转换
localStorage.setItem("countWon", "5");
// 或者存储数字，取出时做类型转换
localStorage.setItem("countWon", 5); // 实际存储的是字符串"5"

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