cookie 和 session

cookie 和 session 都是普遍用来跟踪浏览用户身份的会话方式。

cookie 数据存放在客户端，session 数据放在服务器端。
cookie 本身并不安全，考虑到安全应当使用 session。
session 会在一定时间内保存在服务器上。如果访问量比较大，会比较消耗服务器的性能。考虑到减轻服务器性能方面的开销，应当使用 cookie 。
单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个域名最多保存 50 个 cookie。
将登陆信息等重要信息存放为 session、其他信息如果需要保留，可以放在 cookie 中。

//1.保存cookie值
var dataCookie = "110";
document.cookie = `token=${dataCookie}`;
//2.获取指定名称的cookie值
function getCookie(name) {
  var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
  if (arr != null) {
    console.log(arr);
    return unescape(arr[2]);
  }
  return null;
}
getCookie("token"); //110
//3.也可以使用相应的库操作例如 js-cookie
Cookies.set("name", "value", { expires: 7 }); // 设置一个cookie，7天后失效
Cookies.get("name"); // 'value'
Cookies.remove("name");

localStorage 和 sessionStorage

在 web 本地存储场景上，cookie 的使用受到种种限制，最关键的就是存储容量太小和数据无法持久化存储。在 HTML 5 的标准下，出现了 localStorage 和 sessionStorage 供我们使用。localStorage 适合持久化缓存数据，比如页面的默认偏好配置等；sessionStorage 适合一次性临时数据保存。

截屏2021-04-06 上午10.57.21.png

localStorage.setItem("name", "value");
localStorage.getItem("name"); // => 'value'
localStorage.removeItem("name");
localStorage.clear(); // 删除所有数据

sessionStorage.setItem("name", "value");
sessionStorage.setItem("name");
sessionStorage.setItem("name");
sessionStorage.clear();

参考链接
https://blog.csdn.net/liyifan687/article/details/80077928
https://juejin.cn/post/6844903516826255373#heading-3
https://juejin.cn/post/6844903989096497159#comment
https://blog.csdn.net/alanfancy/article/details/88378014?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2