JS//存储

JS——存储

1 知识点

1.1 cookie

cookie 本身用于客户端和服务器端通信。但是它有本地存储的功能，于是就被“借用”。使用 document.cookie = … 获取和修改即可。

特点： 存储量太少，只有 4KB
所有 http 请求都带着，会影响获取资源的效率
API复杂，需要封装才能用 document.cookie = …

1.2 sessionStorage 和 localStorage

HTML5 专门为存储而设计，最大容量 5M
API简单易用：

localStorage.setItem(key, value);  
localStorage.getItem(key)

locationStorage 和 sessionStorage 都可以在浏览器中把内容存储在本地
但 locationStorage 用的场景更多。
因为存储上了内容后，只要不去删，内容一直在。
而 sessionStorage ，浏览器关了，后台一结束，内容就删。

iOS safari 隐藏模式下，localStorage.getItem 会报错，建议同意使用 try-catch 封装

2 问答

题目：请描述一下 cookie, sessionStorage 和 localStorage 的区别？

① 数据的生命期
/ 可以设置失效时间，默认是关闭浏览器后失效
/ 除非被手动清除，否则永久保存
/ 关闭网页or浏览器后就被清除
② 容量
（ 4KB vs 5M）
③ 与服务端通信
/ 每次都会携带到HTTP头中
/ 仅在客户端中保存，不参与和服务器的通信
④ API易用性
/ 要自己封装、源生接口不友好
/ 源生接口友好、方便