HTML5基础教程（十五）Web 存储：告别“饼干屑”！HTML5 Web存储：把你的数据，稳稳地存进浏览器的小金库！

第一章：从前，有个叫Cookie的“老爷爷”...

在Web的远古时代（其实也没那么古），开发者们想要在浏览器端存点东西，比如用户的登录状态、个性化设置等，唯一的选择就是——Cookie。

你可以把Cookie想象成一个热心过头的老爷爷。你让他帮你记点小事（比如：“用户喜欢蓝色主题”），他每次和你家服务器（Server）通信时，不管需不需要，都会扯着嗓子把这件事重复喊一遍：“嘿！服务器！我家用户喜欢蓝色！记得吗？！喜欢蓝色！”。

这种方式的槽点简直多得能喷出屏幕：

1. 容量极小（4KB）：老爷爷记忆力衰退，只能记大约4000个字符的“饼干屑”，存个用户昵称还行，想存点复杂配置？门儿都没有。
2. 性能浪费：每次HTTP请求，无论是请求图片、CSS还是API，都会自动带上这个老爷爷和他的所有“记忆”（Cookie内容）。这就像你每次点外卖，外卖小哥都得先听老爷爷唠叨一遍你的所有喜好，再跑去取餐，白白浪费了大量带宽。
3. API丑陋：操作Cookie需要通过document.cookie这个字符串自己拆分、拼接，麻烦得让人想摔键盘。

开发者们内心OS：救救我！救救我！我们需要一个更大、更安静、更专一的“私人备忘录”！

于是，HTML5的救世主——Web存储，闪亮登场！

第二章：Web存储：“本地仓库”与“会话背包”的奇幻双雄

HTML5 Web存储提供了两种截然不同的机制，它们是一对好兄弟，但性格和用途大相径庭。理解它们的区别，是玩转Web存储的关键。

1. localStorage - 你的“永久本地仓库”

• 性格：忠诚、持久、念旧。像一个超级可靠的仓库管理员。
• 生命周期：除非你故意开除它（手动删除数据），或者用户清空了浏览器数据，否则它永远存在，跨越浏览器会话和重启。
• 作用域：同一协议（http/https）、同一域名、同一端口下的所有页面，共享同一个localStorage。你在a.html页存的东西，在b.html页也能读到。
• 经典应用场景：用户的主题设置、语言偏好、浏览历史记录、购物车内非敏感商品数据等需要长期保留的配置信息