浏览器 IndexedDB 简明教程 ( 十 ) - 读取数据

在浏览器 IndexedDB 简明教程 ( 九 ) - 添加数据章节中我们介绍了 IDBObjectStore 对象，也介绍了如何使用 add() 方法添加数据，那么，当我们已经添加了数据，就要如何获取它们么？

对于这个傻白甜的问题，想必你已经知道了答案，那就是通过 IDBObjectStore 对象的 get() 方法

但这个方法特别有意思，因为它返回的不是直接数据，而是一个异步请求

IDBObjectStore.get(key)

IDBObjectStore.get(key) 用于从一个 IDBObjectStore 对象中检索数据，参数只有一个，那就是数据的主键，而返回值是是一个异步执行的 IDBRequest 对象

该方法原型如下

var request = objectStore.get(key);

需要注意的是，该函数还会抛出 DOMException 类型的异常

异常	说明
TransactionInactiveError	IDBObjectStore 对象的事务未激活
DataError	提供的 key 或 key 序列中包含不可用的 key
InvalidStateError	IDBObjectStore 不存在，可能被删除或移动到了别的地方

范例

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 里添加了一条数据');

    // 获取主键为 100000 的城市
    var request = city_os.get(100000);

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

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

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

运行结果，输出如下

升级成功
打开数据库成功
往 city 里添加了一条数据
主键 100000 的城市名称：北京

IDBRequest 对象

因为 IDBObjectStore.get(key) 返回的是一个 IDBRequest 对象，那么接下来我们就来看看这个 IDBRequest 对象

IDBRequest 提供了到数据库异步请求结果和数据库的访问。调用任何一个异步方法都会返回该对象

我们先来看看 IDBRequest 包含了哪些属性和方法

属性	描述
IDBRequest.result	只读，返回请求的结果，一般用于 onsuccess 回调
IDBRequest.error	只读，在请求不成功的情况下返回错误，一般用于 onerror 回调
IDBRequest.source	只读，返回索引或对象存储的来源
IDBRequest.transaction	只读，返回此对象存储所属的事务对象
IDBRequest.readyState	只读，返回请求的状态。 pending: 该请求被挂起 done: 请求已经完成

事件	描述
IDBRequest.onerror = function ( )	处理程序错误事件
IDBRequest.onsuccess = function ( )	获取数据成功时的回调

这些属性和事件想必对于学到这章节的你来说应该是很简单的了，我们主要讲解以下几个

IDBRequest.readyState

这个属性表示了当前 IDBRequest 的状态，很少用到，但某些时候非常好用

一般情况下用于在执行了了另一些代码之后回过头来判断 IDBRequest 是否请求完成，但因为有了 onsuccess 回调，所以，派上用场的几率不大，而且也不推荐用
IDBRequest.result

IDBRequest.result 表示请求的结果，在上面的范例中你也看到了，其实 IDBRequest.result 就是一个城市对象，所以可以直接使用 result.city_name 来获取城市名

这个属性一般在 onsuccess 事件中才用，其它情况下，可能是空值，当然了，在 onsuccess 中也可能是空值，那就表示没有获取到
onerror 和 onsuccess 事件

你有没有发现，IndexedDB 中的所有异步操作，都会有这两个异步回调，也就没啥好说的，之前你已经看到了