深入了解浏览器存储(Cookie LocalStorage sessionStorage IndexedDB)

原文地址:https://segmentfault.com/a/1190000018748168
1 Cookie
Cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加
密)。 cookie是服务端生成，客户端进行维护和存储.

Cookie的缺陷
1.1 Cookie 不够大 大小限制在4kb左右
1.2 每次请求都携带cookie 会造成性能浪费
1.3 http请求中cookie是明文,有安全问题
1.4 这个不是缺陷 自己的问题记录
以前尝试Document.cookie 获取cookie中的信息 一直获取不到,原因可能是Cookie设置了HttpOnly 的标记,设置了HttpOnly 标记的Cookie 是不允许直接通过js获取其中的内容的.
2 LocalStorage
特点
2.1 保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存
的数据。
2.2 大小为5M左右
2.3 仅在客户端使用，不和服务端进行通信
2.4 接口封装较好
LocalStorage 主要用来存储不变的数据,所有窗口共享数据
3 sessionStorage
特点
3.1 会话级别的浏览器存储,窗口关闭数据清除,多个窗口不共享数据.
3.2 大小为5M左右
3.3 仅在客户端使用，不和服务端进行通信
3.4 接口封装较好
4 IndexedDB
特点:
4.1 IndexedDB 是一个运行在浏览器上的非关系型数据库,存储空间大,一般来说不会
小于250M
4.2 键值对储存。
4.3 异步
IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，与
LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的
读写，拖慢网页的表现。
4.4 支持事务
4.5 同源限制
IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身
域名下的数据库，而不能访问跨域的数据库
4.6 支持二进制储存
IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和
Blob 对象）