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

其他

三者的异同

缓存原理及优缺点

原理：先查询缓存中有没有要的数据，如果有，就直接返回缓存中的数据。如果缓存中没有要的数据，才去查询数据库，将得到数据先存放到缓存中，然后再返回给后端。

优点：

1. 减少了对数据库的读操作，数据库的压力降低
2. 加快了响应速度  

缺点：

1. 因为内存断电就清空数据，存放到内存中的数据可能丢失
2. 缓存中的数据可能与数据库中数据不一致
3. 内存的成本高 
4. 内存容量相对硬盘小

参考链接

segmentfault.com/a/119000000…
juejin.cn/post/684490…
segmentfault.com/a/119000001…