Js-webStorage和cookie

一、webStorage

webStorage 是本地存储，存储在客户端，包括localStorage 和 sessionStorage，作用（页面刷新不丢失数据）

localStorage

localStorage特点：

1. 数据存储在用户浏览器中
2. 不参与和服务器通信
3. 容量较大，约 5M 左右
4. 生命周期永久生效，除非手动删除，否则关闭页面也会存在
5. 以键值对的形式存储使用

sessionStorage

seeionStorage特点：

• 仅在当前会话下有效，关闭页面或浏览器后被清除
• 存放数据大小一般为5MB
• 数据仅存在浏览器中
• 不参与和服务器的通信

localStorage 和 sessiconStorage使用相同的API:

• setItem（）：设置本地存储
• getItem（）：获取本地存储
• removeItem（）：删除本地存储某一条信息
• clear（）：清空本地存储中所有的信息

localStorage.setItem('key', 'value');   // 存储一条以'key'为名称,value为值的信息

localStorage.getItem('key');    // 获取名称为'key'的值

localStorage.removeItem('key');     // 删除名称为'key'的这条信息

localStorage.clear();   // 清空localStorage中所有信息

注意:

1. 不同浏览器无法共享webStorage中的信息
2. 相同浏览器不同页面(相同域名和相同端口号)可以共享localStorage中或sessiconStorage中的信息

二、cookie

cookie特点：

• 生命周期只在设置的cookie过期时间之前一直有效（即使窗口或浏览器关闭）
• 存放数据大小为4k左右
• 有个数限制，一般不能超过50个
• 与服务器通信，每次都会携带在HTTP头中（容易被拦截，有泄漏信息的危险）
• cookie中保存过多数据会带俩性能问题
• 需要程序员自己封装，源生的Cookie接口不友好

cookie中的属性：

1. name：cookie的名称，唯一性
2. value：cookie的值
3. domain：设置cookie在哪个域下是有效的
4. path：cookie的路径
5. expires：cookie的过期时间
6. max-age：cookie的有效期
7. HTTPOnly：有这个标记的cookie，前端无法获取
8. Secure：设置cookie只能通过HTTPS协议传输
9. SameSite：社会cookie在跨域请求的时候不能被发送

三、使用

本地存储只能存储JSON字符串格式的数据;

js基础数据类型要存储在本地存储中会隐式转换为JSON字符串格式;

复杂数据类型如对对象需要利用 JSON.stringify() 将数据转换为JSON字符串格式;

利用getItem获取出来的引用数据类型需要利用 JSON.parse() 解析为js相应数据类型来使用