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

秒速五厘米 2022-06-11 07:28 161阅读 0赞

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

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

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

## 1. 创建打开数据库 ##

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

![open][]

open方法并不会返回一个DB对象，而是返回了一个`IDBOpenDBRequest`对象，我们通常用到的的DB对象在result属性中：

![result][]

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

*  onerror: 请求失败的回调函数句柄
 *  onsuccess:请求成功的回调函数句柄
 *  onupgradeneeded:请求数据库版本变化句柄，当数据版本和数据库当前版本号不一致时就会调用，但是当传入的数据库版本低于数据库的版本号时将会报错，也就是调用onerror
    
    下面是对打开数据库的完整处理：

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

上面的代码中`onupgradeneeded`句柄还没有发挥它的真正作用，下面将会进一步了解`onupgradeneeded`。

## 2. 创建/打开数据表 ##

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

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

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

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

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

创建表相当于修改了数据库的模式，所以这个操作应该放到`onupgradeneeded`中，下面修改一下代码，实现创建objectStore的操作。

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

## 3. 添加修改数据 ##

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

事务具有三种模式：

1.  只读：read，不能修改数据库数据，可以并发执行
2.  读写：readwrite，可以进行读写操作
3.  版本变更：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中添加，查询，修改了数据：

![end][]

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

![query][]

这个是通过getDataByKey查询到的。

## 4.总结 ##

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

参考资料：[大神的博客][Link 1]

[open]: /images/20220611/99aaea300c3c4f14af50f909caa36264.png
[result]: /images/20220611/458764970b5148ed9ade5e274366db53.png
[end]: /images/20220611/10b000860d4e454a9621433d09d83a3b.png
[query]: /images/20220611/469bb26258874055a1dd229263db7520.png
[Link 1]: http://www.cnblogs.com/dolphinX/p/3415761.html