【JavaScript进阶学习】本地存储 cookie，localStorage 和 sessionStorage介绍和区别

一、本地存储

1. 将数据存储在客户端上的技术叫本地存储技术
2. 技术分类：cookie，localStorage，sessionStorage
   • 数据只能存文本（字符）
   • 数据的大小和数量有限
   • 存储位置浏览器的缓存中
   • 数据的时效性
   • 建议：不要在非个人电脑上存储敏感信息，如果要存，也要对数据进行加密处理

二、cookie的介绍和使用

1. 通信协议：互联网的每两个主体之间进行数据传输时所需要遵守的规则
   • IP：地址协议，用来标记接入互联网的每台设备的唯一身份
   • TCP：面向连接的传输协议
   • UDP：面向数据包的传输协议
   • http：超文本传输协议，无状态协议，每次通信完成断开连接后，丢失上次连接时产生的状态信息
   • 跟踪：跟踪http传输协议的通信过程
   • 会话：一次连接，一次通信
   • 会话跟踪技术：cookie：用来记录http协议在通信过程中产生的相关信息，并且会自动跟随http协议发往服务器。
2. cookie的特点
   • 只能存文本（字符）
   • 数量：50左右
   • 大小：4K左右
   • 时效性expires：默认会话级（关闭浏览器就删除），可以指定

     //配置了有效期的cookie（7天后过期）const d = new Date();d.setDate(d.getDate() + 7);  document.cookie = "e=50;expires=" + d;
     

   • 自动跟随http协议发往服务器
   • 不允许跨域（同源：同协议，同域名，同端口），不允许跨路径
3. cookie的使用
   • document.cookie
4. cookie的增删改查
   • 增(设置):数据格式，必须为：名字=值;配置名=配置信息;配置名=配置信息;(一行代码只能设置一条cookie)
     • document.cookie = "c=30;d=40";
     • 配置路径:path设置路径(文件夹相当于作用域，配置了路径的cookie：父不能拿子，子可以拿父，兄弟不能互拿)
       document.cookie="f=50,path=/abc";
     • 配置了有限期和路径的cookie

     const d = new Date();
     d.setDate(d.getDate()+3);
     document.cookie = "h=80;path=/abc;expires="+d;
     

   • 改：相同的名字不同的值为修改
     document.cookie="a=80";document.cookie="a=90";
   • 删:让cookie的实效性过期（设置成已经过去的时间。例如：昨天）
     • 会话级：关闭浏览器即删除
     • 指定日期

      //让cookie过期（设置为昨天的日期）const d = new Date();d.setDate(d.getDate() - 1);   document.cookie = "e=50;expires=" + d;``` - 查:`console.log(document.cookie)`
   

5. cookie的应用
   • 会话跟踪技术，记录信息，下次http连接时携带信息
   • 前端登录成功了，后端会颁发一个加密的令牌
     • 令牌内包含了当前账户登录成功后的信息
   • 后端同时会保存将该令牌
   • 前端接收到令牌后，会在下次建立连接时自动携带该令牌
   • 后端再次接收到令牌后，会先对令牌进行验证，验证通过，直接默认登录，验证失败，或发现无令牌，登录失效或未登录，要求重新登录
   • 令牌在前端的存储，就可以存在cookie中，自动携带该令牌到后端，也是cookie的任务

三、localStorage 和 sessionStorage

1. 不会随着http协议发往服务器，真正的纯粹的本地存储
2. 大小：5M左右
3. 时效性：
   • sessionStorage只能会话级
   • localStorage只能永久级
4. cookie属于document。localStorage 和 sessionStorage属于window
5. 操作：
   • cookie自身没有提供方法，需要自己封装
   • localStorage 和 sessionStorage自身提供了方法，不需要封装
6. localStorage的使用
   • localStorage.getItem(key)
   • localStorage.setItem(key, val)
   • localStorage.removeItem(key)
   • localStorage.clear()