HTML Web Storage localStorage/sessionStorage

Web Storage：localStorage持久存储/sessionStorage会话存储、存储事件storage event跨标签页通信、5MB限制、JSON序列化存储对象、与Cookie/IndexedDB对比 · 难度：入门 · +10XP

HTML Web Storage —— 在浏览器中保存数据

以前要保存用户数据，只能用Cookie（大小限制4KB、每次请求都发送到服务器）。HTML5提供了Web Storage解决了这些痛点。

localStorage —— 永久保存

// 保存数据
localStorage.setItem('username', '小明');
// 读取数据
const name = localStorage.getItem('username');
// 删除
localStorage.removeItem('username');
// 清空所有
localStorage.clear();

localStorage的数据不会过期，关闭浏览器、重启电脑后仍然存在。只能存字符串，存对象需先 JSON.stringify。

sessionStorage —— 会话期间保存

sessionStorage.setItem('temp', '临时数据');

用法和localStorage完全一样，但关闭浏览器标签页后数据就没了。

三种存储对比

动手练习

1. 基础练习：做一个夜间模式开关——用户点击切换，用localStorage记住选择，刷新页面后保持。
2. 进阶应用：做一个草稿自动保存功能——文本框内容每5秒自动保存到localStorage。
3. 项目实战：做一个最近浏览记录——记录用户点击过的文章（最多10条），用localStorage存储。