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

た入场券 2022-02-26 04:35 668阅读 0赞

### 文章目录 ###

*  事务(transaction)
 *  增
 *  删
 *  查
 *  改

下面是创建数据库跟一个名为 `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);
    });

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

![在这里插入图片描述][20190328234556238.png]

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

# 删 #

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

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

运行结果如下：

![在这里插入图片描述][20190328234608734.png]

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

# 查 #

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

运行结果如下：

![在这里插入图片描述][201903282346231.png]

# 改 #

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

[20190328234556238.png]: /images/20220226/940880f22dbd4d3c9b0b9373df4575f9.png
[20190328234608734.png]: /images/20220226/8435ba8bad514021ba1da4053311f3c4.png
[201903282346231.png]: /images/20220226/44bd2744af0d4ed6a2206479eddf49d6.png