cookie的设置与读取、cookie的优缺点、与本地存储的异同

一、设置无时效性cookie、有时效性cookie

1. 设置无时效性cookie（随浏览器关闭而删除）

   const token = "cookie-cookie-cookie-cookie-cookie-cookie"
   【1】document.cookie = "token" + "=" + String(token);
   【2】document.cookie = "token2" + "=" + token;
   【3**】document.cookie = "token3" + token;
   

   document.cookie = "cookie的名字（string类型）" + "=" + cookie内容;（加号必须加上不然会创建一个没有名字的cookie，而名字会在这个cookie的内容里）
   

2. 设置时效性cookie
   获取传入的过期时间戳 => 获取当前时间 => 获取设置时间（设置过期时间 = 当前时间 + 过期时间）=> 设置cookie

   function setCookie(name,value,time){
     let strsec = getsec(time); // 获取传入的过期时间戳
     let exp = new Date(); // 获取当前时间；
     exp.setTime(exp.getTime() + strsec); // 设置过期时间 = 当前时间 + 过期时间；
     document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); // 设置cookie
   }
   
   function getsec(str){
     var str1=str.substring(1,str.length)*1;
     var str2=str.substring(0,1);
     if (str2=="s") return str1*1000
     else if (str2=="h") return str1*60*60*1000;
     else if (str2=="d") return str1*24*60*60*1000;
   }
   
   setCookie("tokentoken",token,"s10")
   

二、读取cookie

通过 document.cookie 可以读取所有的cookie；

读取指定cookie的写法可通过函数：

function getCookie(name){
  let arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
  if(arr=document.cookie.match(reg)) return unescape(arr[2]);
  else return null;
}
getCookie("token")

三、删除cookie

删除需要给需要删除cookie的名称，给其设置一个不超过现在的时间，即可删除。
例如：setCookie("tokentoken",token,"s0") 这里 s0 代表当前时间，可以立即使cookie过期。

四、cookie的优缺点

常用场景是 判断用户登录

优点

1. cookie可以设置定期删除
2. cookie在同一域名下可以实现跨页面储存，调用。

缺点

1. 储存空间较小，只有4-10k；
2. cookie 可能会被用户禁用，导致无法使用；
3. 有储存个数的限制；
4. cookie安全性不高：可能会被用户手动删除和修改。

五、cookie 与 本地存储的比较

1. cookie在浏览器和服务器间来回传递。
   fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: 'include'})。
   而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

2. cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
   存储大小限制也不同，cookie数据不能超过4k，
   同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据。
   sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

3. 数据有效期不同，
   sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
   localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
   cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

4. 作用域不同，
   sessionStorage不在不同的页面中共享；
   localStorage 在所有同源窗口中都是共享的；
   cookie也是在所有同源窗口中都是共享的。

参考链接：https://www.cnblogs.com/endv/p/8089506.html