HTML5 Web 存储

HTML5 Web 存储让网页数据保存在浏览器本地，刷新或关闭页面后仍在，比 cookie 容量大（约 5MB）、不随每次请求发送到服务器。学习它可实现记住登录态、购物车、草稿箱等功能。它分为 localStorage（永久）与 sessionStorage（会话级）两种。

localStorage 与 sessionStorage

两者 API 完全相同，区别只在生命周期：localStorage 没有过期时间，手动清除才消失；sessionStorage 在关闭标签页后即被清空。

对比	localStorage	sessionStorage	cookie
容量	约 5MB	约 5MB	约 4KB
生命周期	永久	关标签页即失	可设过期
随请求发送	否	否	是

基本 API

四个核心方法与一次清空：setItem(key, value) 存、getItem(key) 取、removeItem(key) 删单个、clear() 全部清空。

localStorage.setItem("name", "张三");   // 存
console.log(localStorage.getItem("name")); // 取，输出：张三
localStorage.removeItem("name");        // 删除
localStorage.clear();                   // 清空全部

典型例子：计数器

点击按钮累计次数，刷新页面后数字不归零。

<button onclick="count()">点击我</button>
<p id="c"></p>
<script>
function count() {
    var n = Number(localStorage.getItem("num") || 0);
    n++;
    localStorage.setItem("num", n);     // 记住次数
    document.getElementById("c").innerHTML = "共点击 " + n + " 次";
}
count(); // 页面加载时先显示一次
</script>

在浏览器中显示为：每次点击数字 +1，刷新页面后仍接着上次的数字累加。

只能存字符串

localStorage 的键值都必须是字符串，存对象时要 JSON.stringify，读取时再 JSON.parse。

var user = { name: "李四", age: 25 };
localStorage.setItem("user", JSON.stringify(user));
var u = JSON.parse(localStorage.getItem("user"));
console.log(u.name); // 输出：李四

storage 事件

在其他标签页修改 localStorage 时，本页会触发 storage 事件，可用来做多标签页同步（sessionStorage 的修改不会触发）。

window.addEventListener("storage", function (e) {
    console.log("键：" + e.key + " 新值：" + e.newValue);
});

易错点

① 值自动转成字符串，数字 1 读出来是 "1"，比较时注意类型；② 隐私模式或 Safari 旧版可能限额或禁用，写入要 try/catch 兜底；③ 不要把密码、令牌等敏感信息放 localStorage，XSS 攻击可任意读取；④ 同源（协议+域名+端口）下所有标签页共享 localStorage。

小结：localStorage 存永久数据、sessionStorage 存临时数据，API 只有 get/set/remove/clear 四个，配合 JSON 序列化即可实现各种本地持久化。