JavaScript中localStorage返回值null判断失效问题解决

问题复现 #

用于读取localStorage属性的函数代码如下：

function readProperty(property)
{
  console.log(localStorage[property]) //Alerts “null”
  if(localStorage[property] == null)
  {
      console.log('Null chek')
      return false;
  }

  return localStorage[property];
}

运行函数时控制台打印对应属性值为"null"，但if判断分支始终不触发，将相等判断替换为严格相等===后依然无法进入分支。

问题更新：将判断条件修改为if(localStorage[property] == 'null')后问题成功解决。

问题根因 #

localStorage的存储机制决定了所有存入的值都会被自动转换为字符串类型，你在控制台看到的打印结果"null"并不是JavaScript原生的空值null，而是内容为null的字符串'null'：

• 原生null是独立的基本数据类型（typeof检测返回object是历史遗留设计），和字符串'null'无论是宽松相等==还是严格相等===判断都不会成立
• 实际取到的值是字符串类型，和原生null值类型、内容都不匹配，自然无法触发对应判断分支。

这种情况一般是之前存值时直接把null值存入localStorage被自动转成了字符串，或者手动给对应属性赋值过字符串'null'导致的。

优化建议 #

除了直接判断字符串'null'的临时修复方案外，更稳妥的写法是存取localStorage时统一做JSON序列化/反序列化，从根源避免类型转换问题：

// 存值时
localStorage.setItem('testKey', JSON.stringify(null))
// 取值时
const val = JSON.parse(localStorage.getItem('testKey'))
// 此时val就是原生null值，直接做===null判断即可正常生效

这种写法同时可以规避存数字、对象、数组时出现的类型自动转换问题，减少不必要的判断bug。

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