Web Storage
关掉浏览器之后，localStorage 还在。浏览器为这个网站留一张小纸条。这一页记下客人 lida 和饮料 tea，一行读作 saved / lida / tea。
模式那一页已经结束
这份存储并不贴在浏览器发出的每一次请求上。Cookie 留到后面的页面。模式那一页停在 true / Order: mint。缺了的键不会抛出错误：getItem 返回 null。
数字存进去也是文本
数字存进去之后也是文本。setItem 写在某个键下面，getItem 把它读回来。
localStorage.setItem("drink", "tea");
console.log(localStorage.getItem("drink"));
console.log(localStorage.getItem("size"));
重新加载之后，getItem("drink") 仍然是 tea。setItem("count", 2) 存的是字符 2，不是数字。日志先是 tea，接着是 null，因为 size 从未写过。
对象要变成文本再走
把普通对象交给 setItem，存下的文本是 [object Object]。JSON.stringify 做出可以保存的文本，JSON.parse 再把对象建回来。JSON.parse(null) 会抛错，所以先读出那一项，是 null 就不要解析。
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const raw = localStorage.getItem("w3-order");
const back = JSON.parse(raw);
console.log(back.guest + " / " + back.drink);
键 w3-order 里是文本，解析之后的值又是对象。同一来源上的每个页面都能读这个键。日志是 lida / tea。
标签页，还是整个浏览器
sessionStorage 有同样的三个方法，它活到那个标签页关闭为止。浏览器再次打开时，localStorage 还在。removeItem 删掉一个键。clear 删掉这个来源的每一个键，不要为了收拾一张订单去调用它。
sessionStorage.setItem("drink", "mint");
console.log(sessionStorage.getItem("drink"));
sessionStorage.removeItem("drink");
console.log(sessionStorage.getItem("drink"));
关掉标签页，只丢掉会话那张纸条。localStorage 里的 w3-order 两个标签页都有。第二个标签页看不见那个 sessionStorage 键。日志先是 mint，然后是 null。
一个来源，所有页面
协议、主机和端口共用这个盒子。它不是单个文件的盒子。首页上设的键，同一网站的订单页也能看见。别的网站读不到。
页面写出什么
页面写下订单，再读回来，并显示客人和饮料。
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const back = JSON.parse(localStorage.getItem("w3-order"));
document.querySelector("#line").textContent =
"saved / " + back.guest + " / " + back.drink;
</script>
</body>
</html>
true / Order: mint 是模式那一页。重新加载，同样的词从 localStorage 回来。这一行读作 saved / lida / tea。
五个短练习
- 用 setItem 把 drink 设为 tea。getItem 返回 tea。
- 对 size 调用 getItem。结果是 null。
- 用 JSON.stringify 保存订单。JSON.parse 之后日志是 lida / tea。
- 把 mint 放进 sessionStorage，再 removeItem。getItem 返回 null。
- 读这一页。行是 saved / lida / tea。
容易错的地方
存储记住的是字符串，不是活的对象。clear 针对整个来源，不是单个键。
- 传入对象，后来读到 [object Object]
- 对 null 调用 JSON.parse
- 以为 sessionStorage 能活到新标签页
- 调用 clear，把每个键都擦掉
- 把这一行读成 true / Order: mint
记住这些
- setItem 和 getItem 存的、读的都是字符串
- 没有的键是 null
- 对象用 JSON.stringify 进去，用 JSON.parse 出来
- localStorage 挺过重新启动
- sessionStorage 随标签页结束
- 页面这一行是 saved / lida / tea
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部