浏览器本地存储方式(cookie sessionStorage localStorage indexDB)

[Lawguancong]

cookie

存储大小4kb，会随请求发送到服务端，可设置过期时间。

cookie原理

https://blog.csdn.net/romanlan/article/details/88175726
https://zhuanlan.zhihu.com/p/141471160

主要字段

mqyqingfeng/Blog#157
• key
• Value
• Domain: 指定 cookie 可以送达的主机名。
• Path: 指定一个 URL 路径，这个路径必须出现在要请求的资源的路径中才可以发送 Cookie 首部
• Expires: cookie最长有效期
• Max-Age: 在 cookie 失效之前需要经过的秒数。（当Expires和Max-Age同时存在时，文档中给出的是已Max-Age为准，可是我自己用Chrome实验的结果是取二者中最长有效期的值）
• Size
• HttpOnly (HttpOnly的作用是让js无法读取cookie)设置 ，可以防止客户端脚本通过 document.cookie 等方式访问 Cookie，有助于避免 XSS 攻击。
• Source: 一个带有安全属性的 cookie 只有在请求使用SSL和HTTPS协议的时候才会被发送到服务器。
• SameSite：(Strict/Lax/None，默认Lax) 可以让 Cookie 在跨站请求时不会被发送，从而可以阻止跨站请求伪造攻击（CSRF）
• SameParty
• Priority

sessionStorage

存储大小为5M，不参与请求，页面关闭清除。

主要字段

• key
• Value

localStorage

存储大小为5M，不参与请求，除非被清理，否则一直存在。

主要字段

• key
• Value

indexDB

存储大小没限制，不参与请求，除非被清理，否则一直存在，运行在浏览器上的非关系型数据库。

Web SQL

关系数据库，通过SQL语句访问（已经被抛弃）

不同域名共享localStorage/sessionStorage

https://www.jianshu.com/p/8c4cee29d532
https://www.jianshu.com/p/e86d92aeae69

总结

存储大小：
• cookie 数据大小不能超过4k（都是浏览器规定的）
• sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到5M或更大
有期时间：
• localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
• sessionStorage 数据在当前浏览器窗口关闭后自动删除
• cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭
其它：
• cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）
• cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递（优化点）
• 请求会带上cookie,sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存
• 不同浏览器无法共享localStorage和sessionStorage中的信息。
• 同一浏览器的相同域名和端口的不同页面间可以共享相同的 localStorage，但是不同页面间无法共享sessionStorage的信息

参考链接
amandakelake/blog#13
https://www.zhangxinxu.com/wordpress/2017/07/html5-indexeddb-js-example/