web存储-cookie、localStorage、SessionStorage使用方式与异同点

存储的技术点，基本在每个项目上都在用（早期是用过隐藏表单临时存储数据，哈哈哈）， 也是找工作每次面试必问的问题，觉得还是有必要总结一下的

web存储方式

定义：web通信过程中，在客户端（浏览器、webview）对用户的数据做一些存储。项目中常用的cookie、localstorage、sessionstorage, 本地数据库IndexedDB、Web SQL基本没有用到过。

cookie

作用

携带用户的标识，帮助服务端区分不同的客户端

为什么存在？

解决HTTP协议无状态，而服务端需要区分不同的客户端。，即服务端需要找到多个请求是否来源于同一客户端。

介绍

• HTTP请求发送Set-Cookie HTTP作为响应的一部分，通过key=value的形成存储字符串。
• 前端收到响应后，会自动将cookie保存在浏览器本地存储中，并在每次请求的时候都携带此字符串。

使用方式

// 获取cookie
document.cookie
// 设置cookie
document.cookie = "name=monkey";
document.cookie = "favorite=horse;max-age=120;path=/";
// 显示: name=monkey; favorite=horse

localStroage 与 sessionStroage

这2者高度相似，主要是为了将更多的会话数据保存在浏览器端，以及减少网络传输，提升网站性能。

使用方式

获取全部

// 直接访问localStorage
window.localStorage

// 直接访问sessionStorage
window.sessionStorage

操作方式(这里是以localstorage为例，sessionStorage只需要做对应的关键字的替换即可)

// 设置name
window.localStorage.setItem("name", "monkey");
// 获取name
window.localStorage.getItem("name"); 
// 删除name
window.localStorage.removeItem("name"); 
// 清空localStorage
window.localStorage.clear();

补充定期清除localStorage的策略

引用类型的值处理

• 设置时 JSON.stringify()
• 获取时 JSON.parse()

// 设置name和时间
window.localStorage.setItem("name", JSON.stringify({
  value: "monkey",
  time: (new Date()).getTime() // 保存时间戳
}))
// 获取name
function getItem(key, maxAge){
  let obj = window.localStorage.getItem(key);
  if(obj){  // 获取变量值对象
    obj = JSON.parse(obj);
  }
  // 存储时间（当前时间-存储时间）< maxAge, 则直接读取参数，否则清除
  if((new Date()).getTime() - obj.time < maxAge){
    return obj.value;
  } else {
    localStorage.removeItem(key);
    return "";
  }
}
// 失效时间为1小时，超过清除name
getItem("name", 60 * 60 * 1000); 

共同点

• 遵循同源策略，在同一个域下可以共享数据（相同的协议、相同的主机名、相同的端口，sessionStorage还要求在同一窗口也就是浏览器的标签页下），跨域是无法访问数据的，保证了数据的安全性。
• 可以设置过期时间的

三者异比较

存储方式	用途	大小	缺点
cookie	适合存储与登录相关的信息，加密策略保证cookie传输安全 ；encodeURIComponent编码的，如果cookie中包含中文，需要decodeURIComponent解码	4K以内，数量：IE20个，IE7+ 最多50，FIreFox最多50个，chrome与Safari未做限制	每次请求都携带，增加网络传输
localstorage	永久存在在客户端，请求不发给服务器；永久保存 ，可代码手动清除；	5M左右	-
sessionstorage	临时存储在客户端，请求不发送服务器；刷新页面数据不会清除，结束会话（关闭页面，跳转页面，关闭浏览器）数据失效	5M左右	-

浏览器查看方法

• 进入开发者工具(F12)
• 选择Application面板
• 在左侧Storage查看cookie ,localStorage以及sessionstorage
  

补充cookie其他参数说明

上面几个参数的含义分别是：

• key: 键名。
• value: 键值。
• Domain: cookie的域，即该网站所在的域，需要注意的是，cookie的域是不区分端口号的。
• Path： cookie的存储路径，默认是当前项目的根路径。
• Expires/Max-Age：cookie的失效时间，以毫秒为单位。不设置时默认在session失效时失效。
• Size：cookie的大小。
• HttpOnly：是否只能通过http请求传输。某些重要的cookie（如sessionId），只能由后台来设置，并且是不能随意修改的，就可以设置该标志位。
• Secure：安全标志。设置了该参数后，该cookie只在https请求中才会被携带。
• SameSite： 为防止CSRF攻击和用户追踪而新增的安全属性，具体可参考阮一峰：Cookie 的 SameSite 属性。

本文参考了以下链接里的部分内容原文链接：https://blog.csdn.net/qq_41694291/article/details/104574835