localstorage可模拟轻量级本地数据库,通过json序列化/解析实现结构化数据的增删改查:增是读取→push→存回;删是过滤→重存;改是遍历替换→重存;查是读取→条件筛选。

localStorage 本身不是数据库,但它可以模拟一个轻量级的本地数据库,适合存结构化数据(比如用户列表、配置项、草稿等)。关键在于:把数组或对象转成 JSON 字符串存进去,读取时再解析回来——所有增删改查操作都围绕这个“序列化 ↔ 解析”流程展开。
增:添加新数据
新增的本质是往已有数组里 push 一条记录,再存回 localStorage。不能直接 setItem 一个新键(那样会覆盖整个数据),而要先读、再改、再写。
- 先用 getItem 获取原始数据,JSON.parse 转成数组(如果还没存过,就设为空数组)
- 用 push 添加新对象,例如
{ id: Date.now(), name: "张三", age: 25 } - 用 setItem 存回:
localStorage.setItem("users", JSON.stringify(users))
删:移除指定数据
删除靠的是过滤——生成一个不含目标项的新数组。
- 读取并解析数据:
const users = JSON.parse(localStorage.getItem("users") || "[]") - 用 filter 剔除目标,比如按 id 删除:
users.filter(u => u.id !== targetId) - 重新存入:
localStorage.setItem("users", JSON.stringify(newUsers))
改:更新已有数据
修改就是“找 + 替换”:遍历原数组,找到匹配项后替换其属性值,再整体保存。
- 解析出数组后,用 map 或 forEach 遍历
- 匹配成功时,返回修改后的新对象(不直接改原对象,保持不可变)
- 例如:
users.map(u => u.id === targetId ? { ...u, name: "李四" } : u) - 最后统一保存更新后的数组
查:按条件检索数据
查询不需要写入,只需读取 + 过滤 + 返回结果。
- 读取并解析数据,得到原始数组
- 用 find(查单条)或 filter(查多条)做条件筛选
- 支持简单条件,如
users.find(u => u.name === "张三")或users.filter(u => u.age > 18) - 注意:所有值都是字符串存的,数值比较前建议转类型,如
parseInt(u.age) > 18
不复杂但容易忽略:每次操作前后都要处理 null/undefined 场景,比如 getItem 返回 null 时默认给空数组;存之前确保数据能被 JSON 安全序列化(不能含函数、undefined、Date 对象等)。











