1. 本地存储 vs Cookie
🍪
Cookie 小饼干:
"我只能存 4KB,而且每次你请求服务器,我都得跟着跑一趟,累死我了!"
📦
Web Storage 大箱子:
"我能存 5MB 甚至更多!而且我只待在浏览器里,绝不跟服务器瞎跑。我才是大容量存储的未来!"
Web Storage 分为两兄弟:
- localStorage: 永久存储。除非你手动清理,否则它海枯石烂都在那。
- sessionStorage: 临时存储。只要你关闭标签页,它就灰飞烟灭。
2. 使用咒语
操作它们非常简单,就像存钱取钱一样。
localStorage.setItem("username", "Pi72");
var name = localStorage.getItem("username");
localStorage.removeItem("username");
localStorage.clear();
3. 计数器实验
点击按钮,我会把点击次数存到你的浏览器里。就算你刷新页面,数字也不会丢!(除非你关掉浏览器再开,如果你用的是 sessionStorage 的话)
🧮 疯狂点击器
0
数据已保存到 localStorage