Simple introduction
if (!('indexedDB' in window)) return;
const DB = window.indexedDB.open('test','1');
这个方法接受两个参数，第一个参数是字符串，表示数据库的名字。如果指定的数据库不存在，就会新建数据库。第二个参数是整数，表示数据库的版本。如果省略，打开已有数据库时，默认为当前版本；新建数据库时，默认为1。
indexedDB.open()方法返回一个 IDBRequest 对象。这个对象通过三种事件error、success、upgradeneeded，处理打开数据库的操作结果。(1) error
error事件表示打开数据库失败。DB.onerror = (err)=>{
console.log('数据库打开失败')
}
(2) success
success事件表示打开数据库成功。let DB = null;
dbRequest.onsuccess = ()=>{
DB = dbRequest.result;
console.log('数据库打开成功')
}
可以通过request对象的result拿到数据库对象。 (3) upgradeneeded
如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件
upgradeneeded。let DB = null;
dbRequest.onupgradeneeded = (event)=> {
db = event.target.result;
console.log('数据库升级')
}
新建数据库与打开数据库是同一个操作。如果指定的数据库不存在，就会新建。不同之处在于第一次新建数据库的时候，因为这时版本从无到有，会触发upgradeneeded，所以后续的操作主要在upgradeneeded事件的监听函数里面完成。
通常，新建数据库以后，第一件事是新建
对象仓库（即新建表）。dbRequest.onupgradeneeded = (event)=> {
db = event.target.result;
console.log('数据库升级')
const objectStore = db.createObjectStore('videos',{keyPath:'id'});
}
上面代码中，数据库新建成功以后，新增一张叫做videos的表格，主键是id。
更好的写法是先判断一下，这张表格是否存在，如果不存在再新建。
dbRequest.onupgradeneeded = (event) => {
db = event.target.result;
let objectStore;
if (!db.objectStoreNames.contains('videos')) {
objectStore = db.createObjectStore('videos', {
keyPath: 'id'
});
}
}
主键（key）是默认建立索引的属性。比如，数据记 录是
{ id: 1, name: 'ind' }，那么id属性可以作为主键。主键也可以指定为下一层对象的属性，比如{ matches: { id: '239' } }的matches.id也可以指定为主键。如果数据记录里面没有合适作为主键的属性，那么可以让 IndexedDB 自动生成主键。
var objectStore = db.createObjectStore(
'videos',
{ autoIncrement: true }
);
新建对象仓库以后，下一步可以新建索引。
dbRequest.onupgradeneeded = (event) => {
db = event.target.result;
let objectStore;
if (!db.objectStoreNames.contains('videos')) {
objectStore = db.createObjectStore('videos', {
keyPath: 'id'
});
objectStore.createIndex('channel_id', 'id', {
unique: true
})
}
}
上面代码中，IDBObject.createIndex()的三个参数分别为索引名称、索引所在的属性、配置对象（说明该属性是否包含重复的值）。
新增数据指的是向对象仓库写入数据记录。这需要通过事务完成。
function add(){
console.log('add')
const transaction = DB.transaction(['videos'],'readwrite');
const store = transaction.objectStore('videos');
store.add({
id: 'zLtKJ',
res: {
"result_code": 200,
"data": {
test:[]
},
"timestamp": 1552548880935
}
})
request.onsuccess = (event)=>{
console.log('write success')
}
request.onerror = (err)=>{
console.log('write error')
console.log(err)
}
transaction.oncomplete = ()=>{
console.log('transaction store success')
}
}
上面代码中，写入数据需要新建一个事务。新建时必须指定表格名称和操作模式（"只读"或"读写"）。表名可以是一个也可以是多个(数组)。
新建事务以后，通过IDBTransaction.objectStore(name)方法，拿到 IDBObjectStore 对象，再通过表格对象的add()方法，向表格写入一条记录。
写入操作是一个异步操作，通过监听连接对象的success事件和error事件，了解是否写入成功。
当有很多写入操作时，也可以监听事务的complete事件，来了解事务是否完成。
当要添加数据的对象存储空间中已经存在有相同键的数据时，使用add()方法添加数据会报错误，而put()方法则会对现有数据进行更新，所以add()方法一般用于初始化数据，而put()方法用于更新数据。
读取数据也是通过事务完成。
function read(){
const transaction = DB.transaction(['videos']);
const store = transaction.objectStore('videos');
const data = store.get('zLtKJ');
data.onsuccess = (event)=>{
if(event.target.result){
console.log(event.target.result);
}else{
console.log('no data')
}
}
data.onerror= (err)=>{
console.log('get data error')
console.log(err)
}
}
上面代码中，objectStore.get()方法用于读取数据，参数是主键的值。
遍历数据表格的所有记录，要使用指针对象 IDBCursor，同样通过事务完成。
function map(){
const store = DB.transaction('videos').objectStore('videos');
store.openCursor().onsuccess = (event)=>{
const cursor = event.target.result;
if (cursor) {
console.log('Id: ' + cursor.key);
console.log('value: ' + cursor.value);
cursor.continue();
} else {
console.log('no more data');
}
}
}
上面代 码中，新建指针对象的openCursor()方法是一个异步操作，所以要监听success事件。
当如果存在key的数据，不能在add数据，会报错，只能更新数据。
function update(){
const store = DB.transaction('videos','readwrite').objectStore('videos');
const request = store.put({
id:'zLtKJ',
res:{
data:{
test:[],
no:1
}
}
});
request.onsuccess = function (event) {
console.log('update success');
};
request.onerror = function (event) {
console.log('update fail');
}
}
代码中，put()更新了id为zLtKJ的数据。
function remove() {
var request = DB.transaction(['videos'], 'readwrite')
.objectStore('videos')
.delete('zLtKJ');
request.onsuccess = function (event) {
console.log('delete success');
};
}
索引的意义在于，可以让你搜索任意字段，也就是说从任意字段拿到数据记录。如果不建立索引，默认只能搜索主键（即从主键取值）。
假定新建表格的时候，对name字段建立了索引。
objectStore.createIndex('name', 'name', { unique: false });
现在，就可以从name找到对应的数据记录了。
var transaction = db.transaction(['person'], 'readonly');
var store = transaction.objectStore('person');
var index = store.index('name');
var request = index.get('webkong');
request.onsuccess = function (e) {
var result = e.target.result;
if (result) {
// ...
} else {
// ...
}
}
IndexedDB API是强大的，但对于简单的情况可能看起来太复杂。如果你更喜欢一个简单的API，可以使用一些第三方封装的库。 比如localForage, dexie.js, 和 ZangoDB等。
下面简单说一下localForage。
Last modified 3yr ago