IndexedDB的JS接口设计详解

最新推荐文章于 2024-08-15 22:51:35 发布

狂奔的木木

最新推荐文章于 2024-08-15 22:51:35 发布

阅读量922

点赞数

IndexedDB 是HTML5中的一种数据存储方式。用来帮助网站，在浏览器本地，存储结构比较复杂的数据。它和HTML5中其它的数据存储方式有一些共性。本文将介绍IndexedDB(以下简称IDB)的JS接口设计。

AD：2013大数据全球技术峰会低价抢票中

接下来介绍IndexedDB(以下简称IDB)的JS接口设计

如图所示，我们按照操作过程，把IDB的接口分成三部分来介绍：

1.初始化数据库连接

2.在数据库中建表

3.在表中存取数据

初始化数据库连接

   
   var req = window.IndexedDB.open(dbName, dbVersion);  
req.onsuccess = function (e) {...}  
req.onupgradeneeded = function (e) {...}  
req.onerror = function (e) {...}

这里有两个重要的参数，dbName是数据库的名称，dbVersion是数据库的“版本”。第2个参数“版本”可能不太好理解，IDB不允许数据库中的表在同一个版本中发生变化，所以当我们创建新表或删除旧表的时候，必须使用一个不一样的版本号。他的作用在于避免重复修改数据库的表结构。默认的版本是空字符串""，我们在使用时，可以使用"1.0"。如果请求中的版本号和当前数据库的版本号相同，则会触发onsuccess事件，如果版本号不同，则会触发onupgradeneeded事件，我们在这一事件中可以对数据库的表结构进行修改，然后再触发onsuccess事件。

在数据库中建表

   
   req.onupgradeneeded = function (e) {  
    var db = req.result;  
    vardb.createObjectStore(storeName, optionParameters);  
};

之前提到了，当被访问的数据库版本号需要发生改变时，onupgradeneeded事件会被触发，我们就从这个事件继续说起。通过req.result我们可以得到当前的数据库对象db。db有一个方法createObjectStore，是专门用来创建表的。第一个参数是表的名称，第二个参数是可选的，它决定了我们要创建的表是内联关键字还是外部关键字，关键字是否需要自动生成，代表这两个设置的字段分别是keyPath和autoIncrement。比如，当第二个参数是

   
   {keyPath: 'profile.id', autoIncrement: false}

时，说明这个表采用内联关键字，且keyPath是profile.id，同时关键字不是自增的，需要每次插入数据时手动设定;当第二个参数是

   
   {autoIncrement: true}

时，说明这个表采用外部关键字，并且关键字是自增的。

同样的，我们可以在onupgradeneeded事件中删除一个表，方法是db.deleteObjectStore(storeName)。道理很简单，就不展开论述了。

在表中存取数据

   
   req.onsuccess = function (e) {  
    var db = req.result;  
    var transaction = db.transaction(storeNames, mode);  
    var store = transaction.objectStore(storeName);  
    var subReq = store.add(value, key);  
    // var subReq = store.get(key);  
    // var subReq = store.delete(key);  
    // var subReq = store.clear();  
    subReq.onsuccess = function (e) {  
        console.log(subReq.result);  
    };  
};