LocalStorage数据持久化存储：从存取到清空的操作指南-H5教程-PHP中文网

localstorage 数据需序列化存储并安全解析，读取前判空、用 try-catch 解析，删除按需选择 removeitem 或 clear，写操作须 try-catch 容错，读失败可降级 sessionstorage 或内存，并支持手动备份与过期清理。

localstorage数据持久化存储：从存取到清空的操作指南

localStorage 能实现跨页面、跨重启的数据保留，但“持久”不等于“永不丢失”——它依赖用户行为和浏览器环境。用对方法才能让数据真正稳住。

存数据：必须序列化，不能图省事

localStorage 只认字符串。传对象、数组、数字或布尔值进去，会自动调用 .toString()，结果不是你想要的：

对象 → 存成 "[object Object]"，取出来 JSON.parse 直接报错
数字 42 → 存成字符串 "42"，取出来仍是字符串，不是 Number 类型
true → 存成 "true"，虽然 JSON.parse("true") 能还原，但类型和原始值判断容易出错

正确做法是统一走 JSON 路径：

const user = { name: 'Leo', score: 95 };
localStorage.setItem('user', JSON.stringify(user)); // ✅

读数据：先判空，再解析，别让 null 搞崩逻辑

getItem 找不到 key 时返回 null，直接 JSON.parse(null) 会抛错。也不能假设数据一定完好，损坏的 JSON 字符串也会导致解析失败。

YouClaw

一款AI工具，主要用于Chat2DB打造的轻量级、开源的个人AI桌面助理智能体，适合需要提升相关任务效率的用户。

下载

稳妥写法：

读取后先检查是否为 null 或空字符串
用 try-catch 包裹 JSON.parse
提供默认值兜底，避免后续代码因 undefined 崩溃

function loadFromStorage(key, defaultValue = null) {
  const raw = localStorage.getItem(key);
  if (!raw) return defaultValue;
  try {
    return JSON.parse(raw);
  } catch (e) {
    console.warn(`解析失败 [${key}]:`, e.message);
    return defaultValue;
  }
}