Getting Started with IndexedDB（翻译）

2019年8月31日 189次阅读来源: zhangding

媒介：这是一篇译文（原文），虽然在《高程3》第23章有IDB的更细致引见，然则有点过期了，这篇文章基础归纳综合了IDB的简朴知识点，假如须要更详实的相识能够参照IDB规范。

简介

HTML5供应的API中包括IndexedDB API。比拟web storage API以键值对的情势在客户端存储数据，IDB是一种更加成熟的索引数据库。经由过程运用IDB，能够更好的构建离线web运用，而且经由过程将数据存储在浏览器而非服务器一侧，降低了服务器和浏览器的交互次数，提高了机能。本文重要引见IDB API的基础概念。

1）背景：什么是IDB？

IDB API源于浏览器自带的index database，该数据库包括简朴值和对象的纪录。每一个纪录都包括键名和以及对应的值，这些值能够是对象或许基础数据类型。IDB API有两种情势：同步或许异步。平常都是运用异步API。IDB API经由过程window.indexedDB对象完成，这个API在各大浏览器的支撑情势并不一致，平常运用浏览器的前缀区分。
《Getting Started with IndexedDB（翻译）》

因而，为了完成跨浏览器兼容，最幸亏运用IDB API之前举行一个声明：

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;

2）建立数据库

在运用IDB之前须要建立一个数据库。因为数据库是异步事情形式，挪用open()要领将会返回一个IDBRequest对象，经由过程这个对象能够绑定胜利或毛病的事宜处置惩罚顺序。以下是一个实例：

var db;
var request = indexedDB.open("TestDatabase");
request.onerror = function(evt) {
  console.log("Database error code: " + evt.target.errorCode);
};
request.onsuccess = function(evt) {
  db = request.result;
};

在上例中，挪用open()建立了名为TestDatabase的IDB数据库。随后给返回的IDBRequest对象绑定了onerror和onsuccess事宜处置惩罚顺序。在onsuccess回调函数中，能够经由过程IDBRequest对象的 result属性获得数据库对象，留待随后运用。
现实上，open()函数包括的第二个参数没有显式列出，第二个参数平常是数据库版本号。该参数用来变动数据库版本，假如数据库版本比参数示意的版本低，将会触发upgradeneeded事宜，并在其事宜处置惩罚顺序中转变数据库构造。变动版本号是唯一能够转变数据库构造的体式格局。

3）建立对象存储空间

一个IDB数据库能够包括对个对象存储空间，一个对象存储空间类似于关联型数据库（如MySQL中）中的表。能够运用IDBRequest对象的createObjectStore()要领建立对象空间，该要领包括两个参数，第一个参数是对象空间的名字，另一个是选项对象，包括keyPath属性和keyGenerator值，keyPath属性是空间中要保留的对象的属性，这个属性将作为存储空间的键来运用。假如对象中没有具有确实名字的属机能够keyPath，能够运用autoIncrement作为keyGeneraotr。autoIncrement能够示意恣意对象属性。
对象存储空间能够具有举行数据检索的索引，索引能够经由过程对象存储空间的createIndex()建立，具有三个参数：索引名、安排索引的属性名、以及选项对象。以下是一个在ungradeneeded事宜处置惩罚顺序中建立对象存储空间的例子：

var peopleData = [
    { name: "John Dow", email: "john@company.com" },
    { name: "Don Dow", email: "don@company.com" }
];
 
function initDb() {
    var request = indexedDB.open("PeopleDB", 1);  
    request.onsuccess = function (evt) {
        db = request.result;                                                            
    };
 
    request.onerror = function (evt) {
        console.log("IndexedDB error: " + evt.target.errorCode);
    };
 
    request.onupgradeneeded = function (evt) {                   
        var objectStore = evt.currentTarget.result.createObjectStore("people", 
                                     { keyPath: "id", autoIncrement: true });
        objectStore.createIndex("name", "name", { unique: false });
        objectStore.createIndex("email", "email", { unique: true });
 
        for (i in peopleData) {
            objectStore.add(peopleData[i]);
        }
    };
}

上例具有以下作用：
1）ongradeneeded在Onsuccess回调之前作用，能够经由过程evt.currentTarget.result接见到方才建立的数据库。
2）keyPath属性“id”在对象中并不存在，因而运用autoincrement发生自增的keyGenerator。
3）在建立索引的时刻能够运用unique限定索引值得唯一性。
4）对象存储空间的add()或put()要领能够增添数据。

4）检索数据—建立事件

当建立了对象存储空间并增添过数据以后，天然就须要接见数据。接见数据要经由过程IDBTransaction对象，这个对象也不具有浏览器兼容性，因而要举行跨浏览器声明：

var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;

这个IDBTransaction对象有三种形式：read-only, read/write and snapshot。平常情况下事件默以为可读形式。获得了事件的索引以后，经由过程objectStore()要领并传入存储空间的称号，就能够接见特定的存储空间，然后就能够经由过程get()/add()/put()/delete()/clear()要领举行数据的检索、增添、删除。事件处置惩罚是异步相应，因而返回要求对象，对这个要求对象能够绑定onerror、onsuccess和oncomplete事宜处置惩罚顺序。

var transaction = db.transaction("people", IDBTransaction.READ_WRITE);
var objectStore = transaction.objectStore("people");                    
var request = objectStore.add({ name: name, email: email });
request.onsuccess = function (evt) {
    // do something when the add succeeded                          
};

5）检索数据—游标

经由过程事件的get()要领能够检索数据，然则这须要你事前晓得数据的keyPath。除此之外还能够经由过程游标检索数据，在事件指定的对象存储空间上运用openCursor()要领建立游标，该要领也是返回一个要求对象，能够绑定onerror或onsuccess。在onsuccess事宜处置惩罚顺序中经由过程event.target.result获得存储空间的下一个对象，在效果集合有下一项时，这个属性中保留一个 IDBCursor 的实例，在没有下一项时，这个属性的值为 null。 IDBCursor 的实例有以下几个属性。

a) direction：数值，示意游标挪动的方向。默许值为 IDBCursor.NEXT（0），示意下一项。 IDBCursor.NEXT_NO_DUPLICATE（1）示意下一个不反复的项，DBCursor.PREV（2）示意前一项，而IDBCursor.PREV_NO_DUPLICATE 示意前一个不反复的项。
b) key：对象的键。
c) value：现实的对象。
d) primaryKey：游标运用的键。多是对象键，也多是索引键。

默许情况下，每一个游标只提议一次要求，因而，还须要挪动游标完成存储空间的遍历。这就依托下面的要领：

a）continue(key)：挪动到效果集合的下一项。参数 key
是可选的，不指定这个参数，游标挪动到下一项；指定这个参数，游标会挪动到指定键的位置。
b）advance(count)：向前挪动 count 指定的项数。这两个要领都邑致使游标运用雷同的要求，因而雷同的 onsuccess
和 onerror 事宜处置惩罚顺序也会获得重用。

一个实例：

var transaction = db.transaction("people", IDBTransaction.READ_WRITE);
var objectStore = transaction.objectStore("people");
 
var request = objectStore.openCursor();
request.onsuccess = function(evt) {  
    var cursor = evt.target.result;  
    if (cursor) {  
        output.textContent += "id: " + cursor.key + " is " + cursor.value.name + " ";                            
        cursor.continue();  
    }  
    else {  
        console.log("No more entries!");  
    }  
};

上例在名为people的对象存储空间上建立事件，然后在该存储空间上经由过程openCursor()建立游标，在返回的要求对象上挪用evt.target.result获得对象实例，然后经由过程对象实例的key和value属性添补名为output的DIV。末了经由过程continue()要领举行遍历。

6） IDB和web storage对照

当须要存储少许的键值对数据时，web storage比IDB更适宜；然则当须要存储更多数据而且须要疾速检索时，运用IDB更适宜。二者是互补的关联。IDB的规范能够参照这个。

    原文作者：zhangding
    原文地址: https://segmentfault.com/a/1190000007462046
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

简介