WebStorage 和 dataset 存储结构化数据必须先 JSON.stringify() 再存,读取时用 JSON.parse() 还原;特殊类型(Date、Map、Set、RegExp)需手动序列化与反序列化,且仅适用于轻量数据。

不能直接存,必须先用 JSON.stringify() 转成字符串,再交给 localStorage 或 sessionStorage;读取时再用 JSON.parse() 还原。这是硬性前提——WebStorage 只接受字符串值,任何对象、数组、日期、布尔甚至数字,都会被自动转成字符串,导致数据丢失或结构错乱。
基础对象和数组的正确保存方式
适用于不含函数、Date、undefined、RegExp 等特殊类型的纯数据结构:
- 存用户列表:
localStorage.setItem('users', JSON.stringify([{id:1,name:'张三'}, {id:2,name:'李四'}])) - 读取并安全还原:
const users = JSON.parse(localStorage.getItem('users') || '[]'); -
|| '[]'是必需的,防止getItem返回null导致JSON.parse(null)报错
处理 Date、Map、Set 等不可序列化类型
原生 JSON.stringify() 会静默丢弃 Date(只留字符串)、跳过 function 和 undefined、把 Map/Set 变成空对象或空数组。需手动转换:
- 存
Date:用date.toISOString()转为标准时间字符串 - 存
Map:先转成键值对对象,Object.fromEntries(map) - 存
Set:先转成数组,Array.from(set) - 推荐封装统一的
replacer函数,集中处理这些类型
读取后还原特殊类型不能靠 parse 自动完成
JSON.parse() 永远只返回 plain object 或 array,不会自动变回 Date 或 Map。反序列化后需主动识别并重建:
立即学习“前端免费学习笔记(深入)”;
- 检测字段是否匹配 ISO 时间格式(如
/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/.test(str)),是则new Date(str) - 若存储时用了
Object.fromEntries(),读取后可用new Map(Object.entries(obj.mapData))还原 - 正则表达式可存
reg.toString()(如/abc/gi),读取后用new RegExp(regStr)构造
data-* 属性里存结构化数据也要走 JSON 流程
DOM 的 dataset 本质也是字符串容器,el.dataset.config = {a:1} 实际存的是 "[object Object]":
- 写入前必须:
el.dataset.config = JSON.stringify({theme: 'dark', count: 5}) - 读取后必须:
JSON.parse(el.dataset.config || '{}') - 注意中划线命名会自动转驼峰(
data-user-id→dataset.userId) - 不适用于大量或深层嵌套数据,仅推荐存轻量配置或临时状态



















