浏览器 IndexedDB 简明教程 ( 十二 ) - 删除数据

好了，对于 IndexedDB 中的增改查数据我们都已经学过了，接下来我们将学习如何从一个存储对象中删除数据

回忆下浏览器 IndexedDB 简明教程 ( 九 ) - 添加数据章节，我们是不是看到了一个 IDBObjectStore.delete(keyorKeyRange) 方法？

回一下浏览器 IndexedDB 简明教程 ( 十一 ) - 读取所有数据章节，我们是不是看到了一个 cursor.delete() 方法

这两种方式都可以用来删除数据，我们接下来的内容将分别介绍它们

IDBObjectStore.delete(keyorKeyRange)

如果要从一个存储对象中删除数据，可以使用 IDBObjectStore.delete() ，该方法接受一个唯一的参数 keyorKeyRange，也就是要删除的数据的主键值

原型如下

IDBObjectStore.delete(keyorKeyRange)

该方法返回一个 IDBRequest 对象，并且在一个单独的线程删除指定的记录

范例

下面的代码，删除主键为 10000 的数据

var db;

//先删除
window.indexedDB.deleteDatabase('demo')

const req = window.indexedDB.open('demo');

req.onerror = function (event) {
    console.log('打开数据库失败');
};

req.onsuccess = function (event) {
    console.log('打开数据库成功');
    db = event.target.result;

    var ts = db.transaction( ['city'] ,'readwrite' )
    var city_os = ts.objectStore('city')

    city_os.add({city_id:100000,'city_name':'北京'});
    city_os.add({city_id:300000,'city_name':'天津市'});

    console.log('往 city 里添加了一条数据');

    // 添加 short 字段
    db.transaction( ['city'] ,'readwrite' ).objectStore('city').delete(100000);

    // 获取主键为 100000 的城市
    var request = db.transaction( ['city']).objectStore('city').get(100000);

    // 注册获取数据失败回调
    request.onerror = function(){
        console.log('Transaction failed');
    };

    // 获取数据成功
    request.onsuccess = function( event) {
        if (request.result) {
            console.log('主键 100000 的城市的简写为：' + request.result.short);
        } else {
        console.log('No data record');
        }
    };

};

req.onupgradeneeded = function (event) {
    console.log('升级成功');
    db = event.target.result;
    db.createObjectStore('city',{keyPath:'city_id'});
}

可以看到，当删除了数据之后，再获取时数据就不存在了

cursor.delete()

同样的，我们可以在遍历数据时，判断当前「游标」的 key 属性是否为某个值，如果是的话，则使用 cursor.delete() 方法删除

cursor.delete() 没有任何参数，返回一个 IDBRequest 对象，在一个独立线程内删除游标所在位置处的记录（不移动游标），随后将游标设置为 null

范例

下面的代码，删除主键为 10000 的数据

var db;

//先删除
window.indexedDB.deleteDatabase('demo')

var req = window.indexedDB.open('demo');

req.onerror = function (event) {
    console.log('打开数据库失败');
};

req.onsuccess = function (event) {
    console.log('打开数据库成功');
    db = event.target.result;
    var ts = db.transaction( ['city'] ,'readwrite' );
    var city_os = ts.objectStore('city')

    city_os.add({city_id:100000,'city_name':'北京'});
    city_os.add({city_id:300000,'city_name':'天津'});
    console.log('往 city 里添加了一条数据');

    var ts2 = db.transaction( ['city'] ,'readwrite' );
    var city_os2 = ts2.objectStore('city');
    // 在 city 存储对象上创建一个游标
    var req3 = city_os2.openCursor();
    req3.onsuccess = function (event) {
        var cursor = event.target.result;
        if (cursor) {
            console.log('city_id: ' + cursor.key);
            console.log('city_name: ' + cursor.value.city_name);

            if ( cursor.key == 100000 ) {
                cursor.delete()
            }

            cursor.continue();
        } else {
        console.log('No more data');
        }
    };

    // 获取主键为 100000 的城市
    var request = db.transaction( ['city']).objectStore('city').get(100000);

    // 注册获取数据失败回调
    request.onerror = function(){
        console.log('Transaction failed');
    };

    // 获取数据成功
    request.onsuccess = function( event) {
        if (request.result) {
            console.log('主键 100000 的城市的简写为：' + request.result.short);
        } else {
        console.log('No data record');
        }
    };

};

req.onupgradeneeded = function (event) {
    console.log('升级成功');
    db = event.target.result;
    db.createObjectStore('city',{keyPath:'city_id'});
}

输出结果如下

升级成功
打开数据库成功
往 city 里添加了一条数据
city_id: 100000
city_name: 北京
city_id: 300000
city_name: 天津
No more data
No data record