页面刷新后local Storage存储的数据丢失，有什么可行的解决方法？

• 优先排查是不是笔误写错了存储对象：新手最容易把localStorage.setItem()错写成sessionStorage.setItem()，sessionStorage的生命周期就是当前会话存活，页面刷新或者关闭标签就会自动清空，本身就做不到持久化存储
• 检查存、取数据的key是否完全匹配：localStorage的key是大小写敏感的，且空格也会被识别，比如存的时候用keyuser_data，读的时候用User_Data就会读到null，很容易误以为是数据消失了
• 检查页面初始化逻辑是否存在自动清空逻辑：很多新手会在页面加载的初始化代码里写重置逻辑，比如调用localStorage.clear()，或者直接给对应key赋值为空值，每次刷新都会先把之前存的数据清掉
• 确认当前浏览器不是隐私/无痕模式：绝大多数浏览器的无痕模式下，localStorage的存储内容会在标签页关闭后自动清除，部分浏览器甚至刷新页面就会清空存储内容
• 确认前后操作的域名、协议、端口完全一致：localStorage是同源策略绑定的，http://localhost:5173存储的数据在http://127.0.0.1:5173下是完全读不到的，不属于同一个存储域
• 引用类型数据必须序列化后再存储：如果要存数组、对象这类引用类型数据，不能直接调用setItem存储，否则会被自动转成[object Object]字符串，刷新后读出来的内容不符合预期，误以为数据丢失，正确的读写写法如下：

  // 存储引用类型数据
  const list = [1, 2, 3, 4]
  localStorage.setItem('todoList', JSON.stringify(list))
  // 读取引用类型数据
  const savedList = JSON.parse(localStorage.getItem('todoList') || '[]')
  

• 可以直接通过浏览器devtools确认存储状态：按F12打开开发者工具，切换到「应用(Application)」标签，在左侧存储栏找到LocalStorage，选中当前站点域名，就能直接看到所有已存储的键值对，可以直接判断是存储阶段失败，还是读取阶段的逻辑错误

内容的提问来源于stack exchange，提问作者Le Van Quang