HTML中如何使用Web Storage存储本地数据-html教程-PHP中文网

localstorage和sessionstorage核心区别在于生命周期和作用域：前者同一域名下所有标签页共享且持久存储，后者仅限当前标签页、关闭即清空；二者api相同，均需json.stringify()序列化对象/数组后存储。

html中如何使用web storage存储本地数据

Web Storage 不是“存 HTML 页面”，而是存字符串键值对；所有非字符串数据必须手动序列化，否则会静默转成 [object Object] 或 undefined。

localStorage 和 sessionStorage 的核心区别在哪

两者 API 完全一致，但生命周期和作用域不同：

localStorage：同一域名下所有标签页共享，关浏览器也不丢，除非手动调用 clear() 或 removeItem()
sessionStorage：仅当前标签页有效，关掉该 tab 就清空，新开同网址 tab 也是全新空间
二者都**不随 HTTP 请求发送**，不会像 cookie 那样增加请求头体积
存储上限通常为 5–10 MB（Chrome 约 10 MB，Safari 移动端约 5 MB），远高于 cookie 的 4 KB

存对象、数组前必须 JSON.stringify()

localStorage.setItem() 只接受字符串作为 value。直接传对象会变成 [object Object]，取出来再 JSON.parse() 就报错。

正确写法：

const user = { name: 'Alice', age: 30 };
localStorage.setItem('user', JSON.stringify(user));
// ✅ 取出后需 parse
const savedUser = JSON.parse(localStorage.getItem('user'));

常见错误：

忘记 JSON.stringify()，导致存进去的是 [object Object]
没检查 getItem() 返回值是否为 null，直接 JSON.parse(null) → 报错 Unexpected token 'n' in JSON at position 0
用 == 判断值是否存在（如 localStorage.getItem('x') == null），应改用 === null || === undefined 或更稳妥的 typeof ... === 'string'

如何安全地读取和校验 Web Storage 数据

不能假设数据一定存在或格式正确——用户可能手动清空、跨设备访问、或旧版本代码写入了损坏结构。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

推荐读取模式：

function getStoredUser() {
  const raw = localStorage.getItem('user');
  if (typeof raw !== 'string') return null;
  try {
    return JSON.parse(raw);
  } catch (e) {
    console.warn('Invalid JSON in localStorage.user:', e);
    return null;
  }
}

关键点：

先判断 typeof raw === 'string'，排除 null / undefined
用 try/catch 包裹 JSON.parse()，防止解析失败中断逻辑
不要依赖 localStorage.key(n) 遍历键名做业务判断，性能差且不可靠（比如被其他脚本污染）

存 HTML 片段要注意什么

可以存 element.outerHTML，但恢复时不会自动重建事件监听器或执行内联脚本：

const el = document.getElementById('form-section');
localStorage.setItem('savedForm', el.outerHTML);
// 恢复
document.getElementById('target').innerHTML = localStorage.getItem('savedForm');

隐患很实际：