浏览器存储有以下形式
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
没有容量限制，允许储存大量数据，提供查找接口，还能建立索引,非关系型数据库
