如何区分localStorage中不存在的键和显式存储的null值

输出结果异常的原因 #

localStorage 存储的所有值都会被强制转换为字符串类型：
调用localStorage.setItem(key, value)时，如果传入的value不是字符串，浏览器会自动调用toString()方法将其转为字符串后再存储。你传入的null转字符串后得到'null'，长度为4，所以第一行输出4。
调用getItem获取到的是字符串'null'，而非原始null值，'null' == null的判断结果为false，因此第二行输出tt is NOT null。

两种状态的区分方案 #

不需要额外新增变量，统一对存储值做JSON序列化/反序列化处理即可实现区分，逻辑如下：

• 原生localStorage.getItem(key)在键不存在时，会返回原始null值，可以用这个规则判断键是否存在
• 存值时统一用JSON.stringify()处理要存入的内容，显式存null时执行localStorage.setItem('tt', JSON.stringify(null))即可
• 取值时先判断原始返回值，再做反序列化处理

示例代码：

// 封装存取方法
function setLocalStorage(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}

function getLocalStorage(key) {
  const rawValue = localStorage.getItem(key);
  // 原始返回为null说明键不存在，返回自定义标识比如undefined
  if (rawValue === null) {
    return undefined;
  }
  return JSON.parse(rawValue);
}

// 测试
setLocalStorage('tt', null);
console.log(getLocalStorage('tt')); // 输出null，代表键存在且值显式为null
console.log(getLocalStorage('unknownKey')); // 输出undefined，代表键不存在

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