【HTTP】Cookie、 LocalStorage 与 SessionStorage基本概念

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