题外话

一个第三方的聊天工具源文档接口都满足不了我们业务的要求，重新开发的新接口还是不满足不了一个客户对多个客服的聊天记录，一个主账号和其他关联账号聊天记录能互通等。基于上述原因工作全部抛给了前端做，还要求做到像QQ聊天记录那样支持查询关键字、日期，能查看当前搜索后内容前后消息，JS虽然牛逼，但也不带这么玩的。。。

而这里面一开始我的设想是把全部记录保存到本地localstorage，这样才能方便我们拿到当前搜索内容的前后消息。但localstorage的内存大小才5M，就接触到了IndexedDB这个东西。有点像mongoDB也是键值对存数据，浅学nodeJS的时候用过下

本篇文章不涉及案例，只科普一下数据库概念和列出部分常使用的API接口。

 

了解数据库

1. 关系型数据库和非关系型数据库

“关系型数据库”是历史悠久，已经有半个世纪，占据主流江山的数据库模型，估计诸位公司的网站多半都是使用的这种数据库模型。而“非关系型数据库”（NoSQL数据库）则要年轻很多，根据资料显示是Carlo Strozzi在1998年提出来的，20年不到，使用键值对存储数据，且结构不固定，非常类似JavaScript中的纯对象。

var obj = {key1: 'value1',key2: 'value2',key3: 'value3',...
};

“关系型数据库”对一致性要求非常严格，例如要写入100个数据，前99个成功了，结果第100个不合法，此时事务会回滚到最初状态。这样保证事务结束和开始时候的存储数据处于一致状态。非常适合银行这种对数据一致性要求非常高的场景。但是，这种一致性保证是牺牲了一部分性能的。

但是，对于微博，QQ空间这类web2.0应用，一致性却不是显得那么重要，比方说朋友A看我的主页和朋友B看我的主页信息有不一样，没什么大不了的，有个几秒差异很OK的。虽然这类应用对一致性要求不高，但对性能要求却很高，因为读写实在太频繁了。如果使用“关系型数据库”，一致性的好处没怎么收益，反而性能问题比较明显，此时，不保证一致性但性能更优的“非关系型数据库”则更合适。同时，由于“非关系型数据库”的数据结构不固定，非常容易扩展。由于对于社交网站，需求变动那是一日三餐常有的事，添加新字段在所难免，“非关系型数据库”轻松上阵，如果使用“关系型数据库”，多半要数据大变动，要好好琢磨琢磨了。

从气质上讲，“关系型数据库”稳重持久，“非关系型数据库”迅速灵动。

在前端领域，Web SQL Database是“关系型数据库”（已被舍弃），indexedDB是“非关系型数据库”（兼容到IE11及主流浏览器）。

2. 了解数据库中的事务-transaction

数据库的事务（英文为’transaction’），我们可以理解为对数据库的操作，而且专指一个序列上的操作。举个例子，银行转账，一个账号钱少了然后另一个账号钱多了，这两个操作要么都执行，要么都不执行。像这种操作就可以看成一个事务。

事务的提出主要是为了保证并发情况下保持数据一致性。关系型数据库中的事务具有下面4个基本特征：

1. 原子性(Atomicity)：事务中的所有操作作为一个整体提交或回滚。
2. 一致性(Consistemcy)：事物完成时，数据必须是一致的，以保证数据的无损。
3. 隔离性(Isolation)：对数据进行修改的多个事务是彼此隔离的。
4. 持久性(Durability)：事务完成之后，它对于系统的影响是永久的，该修改即使出现系统故障也将一直保留。

通常专业描述中会抽取这4个基本特性的首字母，统称为“ACID特性”。事务执行过程可以粗浅地理解为：开始事务，巴拉巴拉操作，如果错误，回滚（rollback），如果没问题，提交（commit），结束事务。

3. 了解数据库中的游标-cursor

现实世界中的“游标”相关联的常见事物就是“游标卡尺”，有刻度有区域：

数据库中的游标其实与之有共同之处。内存条本质上就像一把尺子，我们可以想象上面有很多刻度，然后内存大小就是由这些刻度一个一个堆砌起来的。数据库的事务为了保证数据可以回滚，显然需要有一片内存区域放置那些即将受影响是数据，这个内存区域中的虚表就是数据库的“游标”。

和现实世界的“游标卡尺”相映射就是：一个刻度表示一行数据，游标就是尺子上的一片区域，想要获得数据库一行一行的数据，我们可以遍历这个游标就好了。

4. 数据库中的“锁”-lock

数据库中的“锁”是保证数据库数据高并发时候数据一致性的一种机制。举个例子：现有两处火车票售票点，同时读取某发现上海到背景车票余额为5。此时两处售票点同时卖出一张车票，同时修改余额为5-1也就是4写回数据库，这样就造成了实际卖出两张火车票而数据库中的记录却只少了1张。为了避免发生这种状况，就有了锁机制，也就是执行多线程时用于强行限制资源访问。

 

IndexedDB使用

使用场景

• 具体使用场景：离线文档的编写或读取存储用户浏览和操作的记录。

• 适合的使用场景:

  1. 处于安全性考虑，数据不能存储到服务器端。
  2. 数据为结构性数据或者数据量较大，不适合使用cookies或者localstorage。
  3. 希望数据不随着客户清理缓存而删除。此时我们一定一定要设计好清理浏览器端数据的时机。

基本模式

IndexedDB 鼓励使用的基本模式如下所示（代码有点像AJAX，也是固定格式）：

1.打开数据库并且并且开始一个事务(下面db类似xhr，出镜率极高)。

// 数据库数据结果
var db;
// 打开数据库
var DBOpenRequest = window.indexedDB.open('project', 1);
// 数据库打开成功后
DBOpenRequest.onsuccess = function(event) {        // 存储数据结果db = DBOpenRequest.result;// 做其他事情...
};// 下面事情执行于：数据库首次创建版本，或者window.indexedDB.open传递的新版本（版本数值要比现在的高）
DBOpenRequest.onupgradeneeded = function(event) {// 通常对主键，字段等进行重定义，具体参见demo
};

2.创建一个 objectStore（存储对象，不叫表）。

DBOpenRequest.onupgradeneeded = function(event) {var db = event.target.result;// 创建一个数据库存储对象var objectStore = db.createObjectStore(dbName, { keyPath: 'id',autoIncrement: true});// 定义存储对象的数据项objectStore.createIndex('id', 'id', {unique: true    });objectStore.createIndex('name', 'name');objectStore.createIndex('begin', 'begin');objectStore.createIndex('end', 'end');objectStore.createIndex('person', 'person');objectStore.createIndex('remark', 'remark');
};

3.构建一个请求来执行一些数据库操作，像增加或提取数据等（凡有对‘表’操作，均需先创建transaction）。

// 新建一个事务（参数1：存储对象名字， 参数2：操作权限（只读、读写））
var transaction = db.transaction('project', "readwrite");
// 打开存储对象
var objectStore = transaction.objectStore('project');
// 添加到数据对象中
objectStore.add(newItem);

4.通过监听正确类型的 DOM 事件以等待操作完成。

5.在操作结果上进行一些操作（可以在 request 对象中找到）

常用API

• createObjectStore(“storeName”,paramter)：创建数据库表。
• deleteObjectStore(“storeName”)：删除当前数据库表。
• transaction(storeNames, “type”)：创建数据库事物管理对象。
• close() ：关闭当前数据库，释放资源。

操作型API

• add(Obj)：为当前数据表增加记录。参数为JSON类型，同时返回一个IDBRequest对象
• clear()：清除数据表。
• delete(recordKey)：根据指定的key值删除记录。
• get(recordKey)：根据指定的key值获取完整数据。
• getAll()：获取当前数据表中所有数据。
• count(KeyRange)：清除数据表。
• put(obj，key)：根据指定key值修改数据表数据。

 

使用过程中遇到的细节

1、对于关闭清除数据库，什么时候才要关闭清除，在ng4中不能直接拿到indexedDB的数据库（简称db），必须先通过open()后的异步操作才能获取db。

2、每一个事务操作都含有一个onsuccess,onerror的回调函数，类似ajax，当等到特定状态就会调用方法，处处都是异步，处处都是回调。

3、获取数据要用“游标API”去读取数据，这是一行一行读取数据库数据

var objectStore = db.transaction(dbName).objectStore(dbName);
objectStore.openCursor().onsuccess = function(event) {var cursor = event.target.result;if (cursor) {// cursor.value就是数据对象// 游标没有遍历完，继续cursor.continue();} else {// 如果全部遍历完毕...}
}

 

参考文献

IndexedDB MDN

IndexedDB使用（基本函数封到Angular2的service里，缺少游标遍历自行添加）

张鑫旭线上indexedDB简单模拟