浏览器 IndexedDB 简明教程 ( 九 ) - 添加数据

经过前几章节的铺垫，我们终于要往存储对象里添加数据了，往一个存储对象上添加数据，不仅需要在该存储对象上开启是一个事务，还需要先获取这个存储对象，然后才能调用相关方法来添加数据

我们先来一段代码，这段代码在一个名为 city 的存储对象上添加一条 {city_id:100000,'city_name':'北京'}

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;
    db.transaction( ['city'] ,'readwrite' ).objectStore('city').add({city_id:100000,'city_name':'北京'});
    console.log('往 city 里添加了一条数据');
};

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

运行结果如下

升级成功
打开数据库成功
往 city 里添加了一条数据

上面的代码中，我们首先在 city 存储对象上创建了一个 readwrite 读写事务，创建完事务，获取了 IDBTransaction 事务对象后，我们就能调用 objectStore(name) 来获取一个存储对象，然后调用该存储对象的 add() 方法来添加一个事务

IDBObjectStore 对象

从前面的章节中，我们知道 IDBDatabase.transaction() 方法会返回一个 IDBObjectStore 对象

而这个 IDBObjectStore 对象就表示了一个存储对象，它具有以下方法和属性

IDBObjectStore 属性

属性	说明
IDBObjectStore.indexNames	只读，返回存储空间上的索引名
IDBObjectStore.keyPath	只读，返回存储空间上的 `keyPath`
IDBObjectStore.name	返回该存储空间的名称
IDBObjectStore.transaction	只读，一个 `IDBTransaction`对象，返回此对象存储所属的事务对象
IDBObjectStore.autoIncrement	只读，返回该对象上的 `autoIncrement` 的值

IDBObjectStore 方法

方法	说明
IDBObjectStore.add(value, [key])	新增存储对象，第 2 个可选参数用来指定相关的 key
IDBObjectStore.clear()	创建并立即返回一个 IDBRequest 对象，并在一个单独的线程清除该对象存储。该方法会清除掉存储索引中的所有记录，若只想要删除某项数据可以使用 IDBObjectStore.delete() 或者设置IDBKeyRange。
IDBObjectStore.get(key)	返回一个 IDBRequest 对象，并在一个单独的线程，返回指定键所对应的存储空间。
IDBObjectStore.delete(keyorKeyRange)	返回一个 IDBRequest 对象，并且在一个单独的线程删除指定的记录。
~~IDBObjectStore.getKey(key)~~	（第二版草案），返回一个 IDBRequest 对象，并且在一个单独的线程，返回指定的查询中选择的键。
IDBObjectStore.getAll([query], [count])	返回一个 IDBRequest 包含在对象存储的所有对象指定的参数或在商店中的所有对象的匹配，如果没有给定参数的对象。
~~IDBObjectStore.getAllKeys([query], [count])~~	（第二版草案）立即检索 IDBObjectStore 内的所有对象的键,设置为result请求的对象。
IDBObjectStore.createIndex(name, keyPath, [parameters])	利用指定的name和keyPath参数，创建并返回一个新的IDBIndex对象。该方法只能在versionChange事务模式回调中调用。[parameters]：unique: 如果为true，键的值不能重复。multiEntry: 若为true，当keyPath解析为数组时，每个数组元素都会被添加为索引。若为false，索引就只是一个包含多个元素的数组。
IDBObjectStore.deleteIndex(indexName)	删除一个索引项。该方法只能在versionChange事务模式回调中调用。
IDBObjectStore.index(indexName)	返回对象索引中名为 indexName 的索引
IDBObjectStore.put(value, [key])	返回 `IDBRequest`对象。更新和插入对象
IDBObjectStore.openCursor([range], [direction])	返回 IDBRequest 对象。然后在一个独立的线程内，在对象存储的记录上创建一个游标。
~~IDBObjectStore.openKeyCursor([range], [direction])~~	返回一个 IDBRequest 对象，其结果将被设置为IDBCursor可用于通过匹配结果进行迭代
IDBObjectStore.count(range)	返回一个 `IDBRequest` 对象,并且在一个单独的线程,返回匹配提供的 `key`或者range的记录的总数。如果没有提供参数,它将返回记录的总数

有没有感觉方法好多，其实 IndexedDB 所有的精华都在这里，一些方法，我们会在后面的章节中提到

add() 方法每次只能添加一条数据

需要注意的是，add() 方法每次只能添加一条数据，以数组的方式 [{...},{..}] 添加多条数据会抛出异常

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;
    db.transaction( ['city'] ,'readwrite' ).objectStore('city').add([{city_id:100000,'city_name':'北京'},{city_id:300000,'city_name':'天津'}]);
    console.log('往 city 里添加了一条数据');
};

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

输出结果如下

升级成功
打开数据库成功
Uncaught DOMException: Failed to execute 'add' on 'IDBObjectStore': Evaluating the object store's key path did not yield a value.