说到浏览器本地缓存,我们就必须提到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不会被发送到服务端,也节省了流量