前言：最近在做项目的时候遇到一个问题，将项目嵌入到一个平台，该平台A的用户在项目B下可能拥多个不同角色的账户，每个账户的token不同，每个账户下的操作需要携带该账户的的token信息，因此采取的方案就是使用本地缓存localStorage存储token信息，但是又出现了另一个问题，在同一浏览器不同页面切换到不同账户时，页面a账户进行操作拿到的是页面b账户的token值，同一浏览器不同页面之间的token值串错，因此后续解决方案是用sessionStorage进行存储，保证了不同会话之间的token值相互独立。

用户1在平台A的登录plat_token + 用户1在项目B上的某一账户ID -> 用户1在项目B下的某账号对应的唯一item_token

cookie

cookie使用方法

JavaScript原生的用法

Cookie 以名/值对形式存储。JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookie。

JavaScript 中，创建 cookie如下所示：
document.cookie="itemToken=10001110";

为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）
document.cookie="itemToken=10001110; expires=Thu, 22 Apr 2021 12:00:00 GMT";

使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
document.cookie="itemToken=10001110; expires=Thu, 22 Apr 2021 12:00:00 GMT; path=/";
复制代码

设置cookie的值

const setCookie = (name,value,extime) =>{
  let SetTime = new Date();                                         //设置过期时间
  SetTime.setTime(SetTime.getTime()+(extime*24*60*60*1000));        //设置过期时间
  let expires = "expires="+SetTime.toGMTString();                   //设置过期时间
  document.cookie = name + "=" + value + "; " + expires;            //创建一个cookie
}
复制代码

获取指定名称的cookie值

const getcookie = (objname)=>{ // 获取指定名称的cookie的值  
    let arrstr = document.cookie.split(";");  
    let res = null  
    for(var i = 0;i < arrstr.length;i ++){
      let temp = arrstr[i].split("=");    
      if(temp[0] == objname) {      
        res = unescape(temp[1])    
      }   
    }  
    return res
}
复制代码

localStorage

localStorage.getItem(keyName);  //获取指定key的本地存储的值

localStorage.setItem(keyName,value);  //将value存储到key字段中

localStorage.removeItem(keyName);  //删除指定ke的本地存储的值
复制代码

sessionStorage

sessionStorage.getItem(keyName);  //获取指定key的本地存储的值

sessionStorage.setItem(keyName,value); //将value存储到key字段中

sessionStorage.removeItem(keyName); //删除指定ke的本地存储的值
复制代码

其他

三者的异同

特性	cookie	localStorage	sessionStorage
数据的生命期	可设置失效时间，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持