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） - 不适用于大量或深层嵌套数据，仅推荐存轻量配置或临时状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
