浏览器 IndexedDB 简明教程 ( 十二 ) - 更新数据

经过前面章节的学习，我们已经知道了如何往 IndexedDB 的一个存储对象中添加输出，也知道了如何获取一条数据，更学习了如何遍历所有的数据，那么，如果我们发现一条数据需要更新，那又要怎么做呢？

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

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

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

IDBObjectStore.put()

IDBObjectStore.put() 可以用来更新某个存储对象里的数据，该方法有两个参数，第一个参数是要更新的值，第二个参数是要更新的件，如果忽略第二个参数，默认会使用创建存储对象时指定的 keyPath

和 IDBObjectStore.add() 方法一样，IDBObjectStore.put() 也会返回一个 IDBRequest 对象

原型如下

IDBObjectStore.put(value, [key])

如果指向的记录已被删除，则利用指定的 value 值创建一个新的记录

范例

将主键 100000 的数据插入一个新的字段，{short:"pek"}

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').put({city_id:100000,'city_name':'北京',short:'PEK'});

    // 获取主键为 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 里添加了一条数据
主键 100000 的城市的简写为：PEK

cursor.update(newValue)

在遍历某个存储对象时我们也可以更新数据，使用的时 cursor.update() 方法，原型如下

cursor.update(newValue)

该返回一个 IDBRequest 对象。在一个独立线程内，使用 newValue 来更新对象存储内游标当前位置处的值。如果游标指向的记录已被删除，则利用指定的 newValue 值创建一个新的记录

范例

遍历存储对象 city ，并且当数据的键为 100000 时添加一个新的字段 {short:"pek"}

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.update({city_id:100000,'city_name':'北京',short:'PEK'})
            }

            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
主键 100000 的城市的简写为：PEK