浏览器存储

浏览器存储有以下形式

image.png

• Cookies

• 作用：HTTP协议是无状态的，用Cookie来保存用户的状态信息

• 类型：小型文本文件类型，以键值对形式保存内容

  
  
  image.png
• 如何产生：
  根据服务器 的response header 里面的Set-Cookie字段生成
  也可以通过js生成

document.cookie="user=123"

image.png

image.png

• 属性：

Domain：

指定了可以访问该 Cookie 的 Web 站点或域

Expires：

设置Cookie的生存期。有两种存储类型的Cookie：会话性与持久性。Expires属性缺省时，为会话性Cookie，仅保存在客户端内存中，并在用户关闭浏览器时失效；持久性Cookie会保存在用户的硬盘中，直至生存期到或用户直接在网页中单击“注销”等按钮结束会话时才会失效

HttpOnly：

用于防止客户端脚本通过document.cookie属性访问Cookie，有助于保护Cookie不被跨站脚本攻击窃取或篡改,防止xss攻击

Secure：

指定是否使用HTTPS安全协议发送Cookie。使用HTTPS安全协议，可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改

SameSite:

用来限制第三方 Cookie，防止 CSRF 攻击和用户追踪，减少安全风险

可以设置三个值。

Strict

严格模式，完全禁止第三方请求携带Cookie(会导致不好的用户体验)

Lax

允许导航到目标网址的get请求携带cookie,其他不能携带

None

默认所有请求都携带cookie

详情可以看阮一峰的博客：http://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html
以及https://www.cnblogs.com/ziyunfei/p/5637945.html

• 缺点：
• 大小限制在4KB左右（cookie每一个name=value的value值大概在4k）
• Cookie中name-value太多会性能消耗
• Cookie是明文传递的，具有安全性成问题，

cookie安全性设置

引用图片

cookie大小有限，不合适存储大量数据，HTML5中新增了本地存储Web Storage，分别是sessionStorage和localStorage

• Local Storage

• 特点：

  永久性存储，浏览器窗口关闭或退出，数据依旧存在
  内部数据以键值对形式存储
  标签页之间共享，

• 使用：

//存储数据使用setItem方法。
localStorage.setItem("key","value"); 
//读取数据使用getItem方法。
localStorage.getItem("key");

• Session Storage

• 特点：

会话级存储，窗口关闭就会被销毁清空
内部数据以键值对形式存储
每个标签页各自维护一份Session Storage

• 使用：

//存储数据使用setItem方法。
SessionStorage.setItem("key","value"); 
//读取数据使用getItem方法。
SessionStorage.getItem("key");

• IndexedDB

没有容量限制，允许储存大量数据，提供查找接口，还能建立索引,非关系型数据库