IndexedDB的基础使用—表的增删查改

下面是创建数据库跟一个名为 test数据表的基础代码。后面通过这个例子来演示indexedDB的增删查改。

let db;
function createDataBase(dataBaseName){
    let request = indexedDB.open(dataBaseName);
    request.onupgradeneeded = ()=>{
        db = request.result;
        db.createObjectStore('test', {keyPath: "a"});
    }
}

事务(transaction)

在indexexDB中，对于数据库的操作都是要通过事务（transaction）来完成。

事务具有三种模式：

• 只读（read）
• 读写（readwrite）
• 版本变更（verionchange）

// 打开一个事务
let transaction = db.transaction('test', 'readwrite');
// 读取test objectStore
let objectStore = transaction.objectStore('test');

增

假设现在有一个数据：

let data = [{a:1, b:2, c:3}, {a:2, b:3, c:4}, {a:3, b:4, c:5}];

如果想把它里面的数据存入数据库可以这样做。

let transaction = db.transaction('test', 'readwrite');
let objectStore = transaction.objectStore('test');

data.forEach((item)=>{
    objectStore.add(item);
});

将以上代码输入浏览器控制台执行，结果如下：

可以看到indexedDB中已经添加了data中的数据。

删

调用objectStore的delete方法来删除数据库中数据。

let transaction = db.transaction('test', 'readwrite');
let objectStore = transaction.objectStore('test');

objectStore.delete(2);

运行结果如下：

还可以使用clear方法直接清空整张表。，objectStore.clear();

查

调用objectStore的get方法来查询数据库中数据，传入的参数是数据的主键。

let transaction = db.transaction('test', 'readwrite');
let objectStore = transaction.objectStore('test');

let request = objectStore.get(1);
request.onsuccess = function(){
    let result = request.result;
    console.log(result.b);
}

运行结果如下：

改

修改或更新一个数据项可以使用objectStore的put方法。

let transaction = db.transaction('test', 'readwrite');
let objectStore = transaction.objectStore('test');

let request = objectStore.get(1);
request.onsuccess = function(event){
    let result = event.target.result;
    result.b = 10;
    let updateReq = objectStore.put(result);
    updateReq.onerror = function(event) {
     // 错误处理
   };
   updateReq.onsuccess = function(event) {
     // 完成，数据已更新！
   };
}