更多个人博客：(https://github.com/zenglinan/blog)
如果对你有帮助，欢迎star。
我们都知道 HTTP 是无状态协议, 在远古时代, 没有什么数据存储的方案, 无法跟踪用户的会话操作, 连一个购物车都实现不了。
直到后来, 一系列数据存储方案出现了
Cookie
Cookie 是最开始用来做数据存储的.
服务端在响应头设置 Cookie, 浏览器端接收到 Cookie 存储在硬盘中, 下次请求同域名的站点时就会带上 Cookie.
在浏览器端, 也可以去读写 Cookie, 除非服务端设置了 HTTP-only, 这个 Cookie 就不可写入了, 这也避免了一些恶意攻击.
但是用 Cookie 负责所有的数据存储有以下几个问题:
- Cookie 的存储容量有限, 只有 4K.
-
每次请求都带上 Cookie, 会浪费带宽, 也影响请求速度.
-
同域名的所有站点发起请求的时候都会带上 Cookie, 这会导致: 有可能只是请求一些静态资源, 根本用不着 Cookie, 但是因为和主站点同域却还是发送了.
这也就解释了, 为什么主站域名和静态资源域名不要一样, 否则静态资源的请求也会携带 Cookie, 造成不必要的流量浪费。
localStorage
localStorage 是专门用作浏览器端的存储, 提供了简单明了的 API, 存储容量大.
localStorage 通过键值对形式存储数据, 只能存储字符串, 但是只要是能 JSON 序列化的数据都可以存储, 比如数组, 图片, js文件, 样式等
localStorage 的存储失效是永久的, 除非用代码删除或者用户手动删除
要注意, 这种存储方式是明文存储, 可以直接访问, 不可以用来存重要信息
sessionStorage
sessionStorage 是浏览器的另一大存储机制, 与 localSorage一样的是: 他也有十分大的存储容量.
不同之处在于, sessionStorage 在用户关闭 tab 标签页之后就会失效了, 一般可以存储一些表单数据, 当用户跳转之后再返回, 保证表单数据还在.
不同浏览器无法共享localStorage和sessionStorage中的信息。同一浏览器的相同域名和端口的不同页面间可以共享相同的 localStorage，但是不同页面间无法共享sessionStorage的信息
indexedDB
indexedDB 相当于浏览器提供的本地数据库, 可以储存大量数据, 可以存储字符串, 二进制数据
indexedDB 用键值对形式存储, 键必须是唯一的
indexedDB 为了避免读写大量数据时锁死浏览器, 采取了异步操作, localStorage 则为同步
支持事务。意思就是一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
indexedDB 有同源限制, 网页只能访问同域下的数据库
