说到浏览器本地缓存，我们就必须提到cookie，在HTML5标准之前，只能使用cookie进行浏览器缓存数据。HTML5之后提出了webstorage，webstorage又分为localstorage(本地储存)和sessionstorage(会话储存)。我们来看下他们的差别。
1.Cookie
- 大小限制在4kb
- 每次网络请求cookie都会被发送到服务器
- 如果不设置过期时间，浏览器关闭cookie便会消失
- 只能存储字符串类型
2.LocalStorage
- 大小限制为5MB
- 除非手动清理浏览器缓存，否则数据将一直保留在客户端
- 不会参与服务端的通信
- 只能存储字符串类型，对象类型可以通过JSON.stringfy()方法处理
3.SessionStorage
- 大小限制为5MB
- 浏览器关闭，缓存数据声明周期结束
- 不会参与服务端的通信
- 只能存储字符串类型，对象类型可以通过JSON.stringfy()方法处理
4.WebStorage操作
setItem (key, value) —— 保存数据，以键值对的方式储存信息。
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
clear () —— 删除所有的数据
key (index) —— 获取某个索引的key
4.WebStorage优点
- 安全性:cookie可能会被截获，而webstorage不会随header发送到服务端，因此不会这种问题，但也存在伪造的可能，出于安全性考虑，一般使用webstorage
- 快速:因为存储在本地，获取数据会比存在服务端的数据快
- 节约与服务端交互:webstorage不会被发送到服务端，也节省了流量