前端数据存储方案

前言

前端数据存储方案主要有 Cookie、Web Storage、IndexedDB 三种。下图为 Chrome 浏览器的存储方案，虽然支持 Web SQL 存储，但是 W3C Web应用工作组于2010年11月停止了对该规范的研究，所以不提倡使用，下面就以上三种存储方案做一下介绍。


一、Cookie

1、概念

Cookie 指某些网站为了辨别用户身份而储存在用户本地终端上的数据。每次请求都会把本地的 Cookie 发到服务器，让服务器知道当前用户的状态。

Cookie 有域的概念，不能跨域操作。

2、适用场景

适合客户端存储较少的数据，用于标识状态（用户登录状态、购物车等）。

3、特点

1）数据存放位置：客户端浏览器缓存中。

2）数据存储大小：Cookie 存储的数据不能超过 4 KB，浏览器支持的 Cookie 是30～50个，IE6 20个。

3）数据有效期：cookie 支持设置数据过期时间。

4）数据作用域：cookie 在所有同源窗口中共享。

4、缺点

Cookie 容量小（4K）；不安全，容易被拦截暴露数据。

5、API

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie

6、HTTP 请求头字段相关

1
2
3
4
5
6
1）Expires：cookie最长有效期
2）Max-Age：在 cookie 失效之前需要经过的秒数。（当Expires和Max-Age同时存在时，以 Max-Age 为准）
3）Domain：指定 cookie 可以送达的主机名。
4）Path：指定一个 URL 路径，这个路径必须出现在要请求的资源的路径中才可以发送 Cookie 首部
5）Secure：一个带有安全属性的 cookie 只有在请求使用SSL和HTTPS协议的时候才会被发送到服务器。
6）HttpOnly: 设置了 HttpOnly 属性的 cookie 不能使用 JavaScript 经由 Document.cookie 属性、XMLHttpRequest 和 Request APIs 进行访问，以防范跨站脚本攻击（XSS）。


二、Web Storage

1、概念

Web Storage 有 sessionStorage 和 localStorage 两种存储机制。

sessionStorage 为每一个给定的源维持一个独立的存储区域，该存储区域在页面会话期间可用；localStorage 在浏览器关闭，然后重新打开后数据仍然存在，可用作持久存储数据。

2、适用场景

适合客户端存储较少的数据，且数字存储时会转成字符串。

3、特点

1）数据存放位置：sessionStorage 和 localStorage 的数据仅在本地保存，不会自动发送给服务器。

2）数据存储大小：5M。

3）数据有效期：sessionStorage 仅在当前浏览器窗口关闭之前有效；localStorage 始终有效，窗口或浏览器关闭也一直保存。

4）数据作用域：sessionStorage 即使同一页面，不同的浏览器窗口中也不共享；localstorage 在所有同源窗口中都共享。

5）同步：操作数据是同步的。

4、缺点

不能用于存储重要信息，本地储存数据都容易被篡改，容易受到 XSS 攻击。

5、API

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API/


三、IndexedDB

1、概念

IndexedDB 是一种在用户浏览器中持久存储数据的方法，用于客户端存储大量结构化数据(包括文件/ 二进制大型对象(blobs)。

2、适用场景

适合客户端存储大量结构化数据。

3、特点

1）键值对储存： IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括字符串、JavaScript 对象、二进制数据（ArrayBuffer 对象和 Blob 对象）。对象仓库中，数据以”键值对”的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

2）数据存储大小： 取决于硬盘大小，全局限制为可用磁盘空间的50％。如果超过此范围，则会发起称为源回收的过程，删除整个源的数据，直到存储量再次低于限制。删除源数据没有只删一部分的说法——因为这样可能会导致不一致的问题。组限制——这被定义为全局限制的20％，但它至少有10 MB，最大为2GB。

3）异步： IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

4）支持事务： IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

5）同源限制： IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

4、缺点

不能设置数据存储的范围，数据太多时就比较占内存。

5、API

https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/

6、第三方类库

  • localForage：一个简单名称的Polyfill：客户端数据存储的值语法，它在后台使用IndexedDB，但在不支持IndexedDB的浏览器中回退到WebSQL或localStorage。
  • Dexie.js：IndexedDB的包装器，通过简单的语法，可以更快地进行代码开发。
  • PouchDB：使用IndexedDB在浏览器中实现CouchDB的客户端。
  • idb：一个微小的（〜1.15k）库，主要反映了IndexedDB的API，但小的改进，使一个很大的区别的可用性。


参考资源

http://www.ruanyifeng.com/blog/2018/07/indexeddb.html


微信打赏
标签: Web 前端