IndexDB

1. 概念

说到数据库，应该大家都熟悉，可以用来存储大量数据。比如，我们在淘宝上面搜索一本书，就回从淘宝巨大的数据库中查找。一直以来，数据库相关的都是服务端的工作。IndexDB的出现，让浏览器具备了创建本地数据库的能力。

2. IndexDB的作用

首先需要说明的是，IndexDB是取代不了服务端数据库的。但是在下面的场景可能会比较有用

• 用于离线应用。在设备有网络的时候从服务端获取数据，保存在本地的数据库，以便在离线的时候可以访问；

• 提高性能。关于IndexDB的处理都是异步的，不会阻塞页面。

• 改进本地存储。对于数据量巨大或者结果复杂的数据，使用IndexDB会简单一些。

需要注意的是IndexDB对应于特定电脑的特定浏览器里面的特定网站，一旦任何一个改变了，都会对应新的IndexDB。

3. 创建、连接数据库

需要注意的是，在使用IndexDB的网页中，都需要先创建并连接数据库，通常在页面加载完成时(onload事件)进行。

window.onload = function() {
    // 通过indexedDB对象的open()函数创建了名为TestDB的数据库，版本号为1。
    var db = window.indexedDB.open("TestDB", 1);
}

假如用户是第一次访问页面，则会在浏览器创建新的数据库；如果用户已经访问过，就会直接拿到相应的数据库，其实是一样的意思。

为了方便，假如我在Baidu首页控制台输入window.indexedDB.open(“TestDB”, 1)，可以看到

在百度页面下新增了名为TestDB，版本号为1的本地数据库。

注意：如前面说到的，IndexDB的一切动作都是异步的，当执行open时，不会阻塞页面。

4. 创建数据表

实际上，每一个indexedDB对象的方法都最少对应两个事件响应函数：onsuccess（成功）和onerror（失败）。

创建数据表就是通过上面open方法特有的onupgradeneeded方法处理,该方法会在数据库版本不可用时（指定新的版本号）触发，相当于升级数据库：

db.onupgradeneeded = function(event) {
    // 通过db.result获取数据库对象
    var dbcontent = db.result;
    // 通过createObjectStore方法创建数据表
    var objectStore = dbcontent.createObjectStore("Person", { keyPath: "name" });
}

上面代码创建了名为Person的数据表，主键为name。

5. 保存数据

要保存数据，就应先有数据，IndexDB的数据通过对象初始化，如下：

function LinkPerson(name, sex) {
    this.name = name;
    this.sex = sex;
}

var name = document.getElementById('name').value;
var sex = document.getElementById('sex').value;
var dataObj = new LinkPerson(name, sex);

然后通过transaction()方法创建写入的操作，获取存储对象，传入数据

// readwrite表示需要对Person数据表进行插入，更新或删除等操作，
var transaction = dbcontent.transaction(["Person"], "readwrite");  

var objectStore = transaction.objectStore("Person");

// 通过put()方法传入
var sendData = objectStore.put(dataObj);

如下图，写入了一组测试数据：

未完待续…

赏

谢谢你请我吃糖

微信