HTML5本地数据库--IndexDB的基本操作

HTML5本地数据库–IndexedDB的基本操作

IndexedDB是一个用于在浏览器中存储较大数据结构的Web API，并且提供了索引功能以实现高性能查找。和其他基于SQL的关系型数据库一样，indexedDB是一个事务型的数据库系统，然而它是使用JavaScript对象，而不是列数固定的表格来存储数据的。

和一般的数据库一样，基础操作就那几种，创建/打开数据库，创建/打开表，对数据的增删查改。

1. 创建打开数据库

通过

indexedDB.open(name)

打开或者创建数据库，如果该数据库已经存在，那么就打开这个数据库，否则创建这个数据库。

open()

这个方法其实是有两个参数，第一个参数是name，数据库的名字，必须传入，第二个参数是version，数据库的版本，不传入的话默认是1。一开始接触到这里也是感觉很奇怪，为什么打开一个数据库需要传入版本呢？经过后面的学习才知道，这里的版本和我们平常所说的数据库的版本是不一样的。这里的版本指的是你创建的数据库的版本，而不是数据库这个软件的版本，当你对数据库中的模式进行修改时就需要升级数据库的版本了。



open方法并不会返回一个DB对象，而是返回了一个

IDBOpenDBRequest

对象，我们通常用到的的DB对象在result属性中：



除了result之外，还有其他的一些属性：

onerror: 请求失败的回调函数句柄

onsuccess:请求成功的回调函数句柄

onupgradeneeded:请求数据库版本变化句柄，当数据版本和数据库当前版本号不一致时就会调用，但是当传入的数据库版本低于数据库的版本号时将会报错，也就是调用onerror

下面是对打开数据库的完整处理：

function openDB(name,version) {
var version = version || 1;
var request = indexedDB.open(name,version);
request.onerror = function(e) {
console.log("openDB error!");
};
request.onsuccess = function(e) {
//个人感觉可能把DB对象return出去比较好，这样写复用性应该不太好，不过是测试嘛，就简单写咯
myDB.db = e.target.result;
};
request.onupgradeneeded = function(e) {
console.log("indexDB version change to " + version);
}
}

var myDB = {
name : "test",
version: 3,//所谓版本，并不是指数据库这个软件的版本，而是自定义的这个库的版本，当需要更新数据模式时，就提高数据库的版本就行了
db: null
};
openDB(myDB.name,myDB.version);

通过上面的操作，就可以创建一个名为test的数据库。

上面的代码中

onupgradeneeded

句柄还没有发挥它的真正作用，下面将会进一步了解

onupgradeneeded

。

2. 创建/打开数据表

在indexedDB中，没有数据表，那么indexedDB是使用什么来存储数据呢？objectStore！objectStore相当于一张表，但是objectStore并不想mysql中的表一样，具有一列一列的结构，它只有两列，一列是keypath（键值），另一列就是存储的数据了，存储的数据一般用JavaScript中的对象来表示。每一条数据都和一个键相关联。

我们可以使用每条记录中的某个指定字段作为键值（keyPath），也可以使用自动生成的递增数字作为键值（keyGenerator），也可以不指定。选择键的类型不同，objectStore可以存储的数据结构也有差异。

键类型	存储数据
不使用	任意值，但是没添加一条数据的时候需要指定键参数
keyPath	Javascript对象，对象必须有一属性作为键值
keyGenerator	任意值
都使用	Javascript对象，如果对象中有keyPath指定的属性则不生成新的键值，如果没有自动生成递增键值，填充keyPath指定属性

表的概念有了，那么怎么创建表呢

通过数据库实例的createObjectStore(storeName,keyType),就可以创建objectStore了。这个方法有两个参数，一个是objectStore的名字，一个是创建表的键类型。

创建表相当于修改了数据库的模式，所以这个操作应该放到

onupgradeneeded

中，下面修改一下代码，实现创建objectStore的操作。

function openDB(name,version) {
var version = version || 1;
var request = indexedDB.open(name,version);
request.onerror = function(e) {
console.log("openDB error!");
};
request.onsuccess = function(e) {
//个人感觉可能把DB对象return出去比较好，这样写复用性应该不太好，不过是测试嘛，就简单写咯
myDB.db = e.target.result;
};
request.onupgradeneeded = function(e) {
var db = e.target.result;
if(!db.objectStoreNames.contains('students')) {
db.createObjectStore('students',{keyPath:'id'});
}
console.log("indexDB version change to " + version);
}
}

上面代码在创建数据的同时也创建了表。

3. 添加修改数据

在对数据库中的数据进行任何操作时，都要通过事务来进行处理，事务中需要指定该事务用到了那些objectStore，所以我们要在一开始把objectStore创建好。

事务具有三种模式：

只读：read，不能修改数据库数据，可以并发执行

读写：readwrite，可以进行读写操作

版本变更：verionchange

var transaction=db.transaction([students','taecher']);  //打开一个事务，使用students 和teacher object store
var objectStore=transaction.objectStore('students'); //获取students object store

我们的操作都是要通过objectStore来进行的。

所以在对数据进行操作之前，一般要经过这些步骤，首先打卡一个事务，然后获取到这个事务中的objectStore，最后才是通过objectStore对数据进行操作。

objectStore具有一些方法，用来对数据库进行操作。

//先准备一些数据，向objectStore中添加
var students = [{
id:1001,
name:"John",
age:24
}, {
id:1002,
name:"Jane",
age:25
}, {
id:1003,
name:"Bob",
age:30
}];
//通过value查询
function getDataByKey(db, storeName, value) {
var transaction =db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var request = store.get(value);
request.onsuccess = function(e) {
var student = e.target.result;
console.log(student);
}
}
//更新数据，通过调用store的put方法来更新数据。会自动替换键值相同的记录，达到更新目的，没有相同的则添加
function updateDataByKey(db, storeName, student1) {
var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var request=store.get(student1.id);
request.onsuccess=function(e) {
//var student=e.target.result;
store.put(student1);
};
}
//添加数据
function addData(db, storeName) {
var transaction=db.transaction(storeName,'readwrite');
var store=transaction.objectStore(storeName);
for(let i=0; i < students.length; i++) {
store.add(students[i]);
}
}
//准备的用于更新的数据
var student1= {
name:'wu',
gender: "male",
id:1004
};
openDB(myDB.name,myDB.version);
//由于API是异步的，所以不保证在打开数据库后myDB能获取到db对象，所以用setTimeout延时一下，确保myDB中的db对象不为空
setTimeout(function() {
addData(myDB.db, 'students');
getDataByKey(myDB.db, 'students', 1002);
updateDataByKey(myDB.db, 'students', student1);
},1000);

这样我们就在名为test的数据库中的名为students的objectStore中添加，查询，修改了数据：



上面的前三个数据，是我们一开始添加的，第四个数据是后面通过updateDateByKey方法修改的。



这个是通过getDataByKey查询到的。

4.总结

大致列举了一些indexedDB的基本操作，还有一些没有列举出来。整体上感觉，没有什么特别突出的，亮眼的功能，和我们自己定义对象没什么太大区别，和保存到localstorage差不多，反而麻烦了一些。。不过据说索引才是indexedDB的真正利器，暂时用不到，就不去详细了解了。

参考资料：大神的博客