Web Storage只支持字符串,存储对象必须用JSON.stringify()转换,读取时必须用JSON.parse()解析,否则数据会丢失或损坏。

Web Storage(包括 localStorage 和 sessionStorage)只支持字符串类型的值,任何对象、数组、日期、布尔甚至数字,如果直接存入,都会被自动调用 toString() 转成类似 [object Object] 的无意义字符串,导致数据丢失或结构损坏。所以 JSON.stringify 和 JSON.parse 不是可选技巧,而是必须使用的转换桥梁。
存数据:必须先 stringify 再 setItem
JavaScript 对象不能直接塞进 localStorage。哪怕只是个普通数组或字面量对象,也得先转成标准 JSON 字符串:
localStorage.setItem('cart', JSON.stringify([{id: 1, name: '苹果'}, {id: 2, name: '香蕉'}]))- 如果对象含 Date、Map、Set、RegExp 或函数,原生
JSON.stringify会丢数据——Date 变成空字符串,Map/Set 变成 {} 或 [],函数和 undefined 直接消失 - 需要自定义
replacer函数处理特殊类型,比如把new Date()转成toISOString(),把new Map([['a', 1]])先转成Object.fromEntries(map)
取数据:必须先 getItem 再 parse
localStorage.getItem('key') 返回的永远是字符串,哪怕你存的是数组,它也不会自动变回数组。不 parse 就直接用,会出错或行为异常:
使用 JSON Schema 验证 JSON 数据,从示例 JSON 生成 schema,并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
-
const cart = JSON.parse(localStorage.getItem('cart') || '[]');—— 加|| '[]'防止 null 导致JSON.parse(null)报错 -
JSON.parse()只返回 plain object 或 array,不会还原成 Date、Map 等原生类型;还原得靠手动判断:比如检测字符串是否匹配 ISO 时间格式,再new Date(str);或用new Map(Object.entries(obj.mapData)) - 若存储时用了
reg.toString()存正则,读取后要用new RegExp(str)重建
常见坑点与应对
很多问题其实就卡在这两个方法的使用细节上:
- 存了但读出来是
[object Object]?说明忘了stringify,对象被隐式转成了字符串 - 读出来报
Unexpected token u in JSON at position 0?大概率是getItem返回null,没做空值保护就直接parse - 时间变成字符串、Map 变成空对象?不是
parse不行,是stringify没处理好原始类型,反序列化自然无法还原 - 键名含特殊字符或中文?没问题,Web Storage 支持任意字符串键名,只要值是合法 JSON 字符串即可
封装建议:避免重复写样板代码
每次存取都手写 stringify 和 parse 容易漏掉空值判断或类型还原。可以封装基础工具函数:
- 统一存:接受任意值,内部判断类型并预处理,再
stringify后setItem - 统一取:
getItem后先判空,再parse,最后根据约定字段做类型恢复(如createdAt字段自动转 Date) - 对高频使用的结构(如用户信息、配置项),可单独定义序列化/反序列化规则,提升可维护性

















