浏览器数据库indexDB方法封装

        indexDB是HTML5的新概念，indexedDB是一个用于在浏览器中存储较大数据结构的Web API，并且提供了索引功能以实现高性能查找。不同于其他基于SQL的关系型数据库，indexedDB是一个事务型的数据库系统，会将数据集作为个体对象存储，数据形式使用的是JSON，而不是列数固定的表格来存储数据的。

        indexDB比本地存储很强大，而且存储大小是250m以上（受计算机硬件和浏览器厂商的限制）。

indexDB优点是：存储容量大；支持异步操作；具有事务特点；
indexDB缺点是：不支持DO操作；不能跨域。

indexDB中的对象：

数据库：IDBDatabase 对象
对象仓库：IDBObjectStore 对象
索引： IDBIndex 对象
事务： IDBTransaction 对象
操作请求：IDBRequest 对象
指针(游标)： IDBCursor 对象
主键集合：IDBKeyRange 对象
 

应用封装实例

1，打开数据库

/**
 * 封装的方法以及用法
 * 打开数据库
 */
export function openDB(dbName, storeName, version=1) {
    return new Promise((resolve,reject) => {
        let indexdDB = window.indexedDB;
        let db;
        const request = indexdDB.open(dbName, version)
        request.onsuccess = function(event) {
            db = event.target.result // 数据库对象
            resolve(db);
        }
        request.onerror = function(event) {
            reject(event);
        }
        request.onupgradeneeded = function(event) {
            // 数据库创建或者升级的时候会触发
            console.log('onupgradeneeded');
            db = event.target.result; // 数据库对象
            let objectStore;
            /**判断是否存在数据库 */
            if(!db.objectStoreNames.contains(storeName)) {
                objectStore = db.createObjectStore(storeName,{ keyPath: 'id'}) // 创建表
            }
        }
    })
}

2，新增数据

export function addData(db,storeName,data) {
    return new Promise((resolve, reject) => {
        console.log('db',db);
        let request = db.transaction([storeName],'readwrite') // 事务对象 指定表格和操作模式（'只读' 或 '读写'）
            .objectStore(storeName) // 仓库对象
            .add(data)
        request.onsuccess = function(event) {
            resolve(event)
        }
        request.onerror = function(event) {
            throw new Error(event.target.error)
            reject(event)
        }
    })
}

3，通过主键读取数据

/**
 * 通过主键读取数据
 */
export function getDataByKey(db, storeName, key) {
    return new Promise((resolve, reject) => {
        let transaction = db.transaction([storeName]) // 事务
        let objectStore = transaction.objectStore(storeName) // 仓库对象
        let request = objectStore.get(key)
        request.onerror = function(event) {
            reject(event)
        }
        request.onsuccess = function(event) {
            resolve(request.result)
        }
    })
}

4，通过游标读取数据

/**
 * 通过游标读取数据
 */
export function cursorGetData(db,storeName) {
    let list = [];
    let store = db.transaction(storeName,'readwrite') //事务
        .objectStore(storeName) // 仓库对象
    let request = store.openCursor() // 指针对象
    return new Promise((resolve, reject) => {
        request.onsuccess = function(e) {
            let cursor = e.target.result
            if(cursor) {
                // 必须要检查
                list.push(cursor.value)
                cursor.continue() // 遍历了存储对象中的所有内容
            } else {
                resolve(list)
            }
        }
        request.onerror = function(e) {
            reject(e)
        }
    })
}

5，通过索引读取数据

/**
 * 通过索引读取数据
 */
export function getDataByIndex(db, storeName, indexName, indexValue) {
    let store = db.transaction(storeName,'readwrite').objectStore(storeName);
    let request = store.index(indexName).get(indexValue)
    return new Promise((resolve,reject) => {
        request.onerror = function(e) {
            reject(e)
        }
        request.onsuccess = function(e) {
            resolve(e.target.result)
        }
    })
}

6，通过索引和游标查询记录

/**
 * 通过索引和游标查询记录
 */
export function cursorGetDataByIndex(db, storeName, indexName, indexValue) {
    let list = []
    let store = db.transaction(storeName,'readwrite').objectStore(storeName) // 仓库对象
    let request = store.index(indexName) // 索引对象
        .openCursor(IDBKeyRange.only(indexValue)) // 指针对象
    return new Promise((resolve,reject) => {
        request.onsuccess = function(e) {
            let cursor = e.target.result
            if(cursor) {
                list.push(cursor.value)
                cursor.continue() // 遍历了存储对象中的所有内容
            }else{
                resolve(list)
            }
        }
        request.onerror = function(ev) {
            reject(ev)
        }
    })
}

7，更新数据

/**
 * 更新数据
 */
export function updateDB(db, storeName, data) {
    let request = db.transaction([storeName],'readwrite') // 事务对象
        .objectStore(storeName) // 仓库对象
        .put(data)
    return new Promise((resolve,reject) => {
        request.onsuccess = function(ev) {
            resolve(ev)
        }
        request.onerror = function(ev) {
            reject(ev)
        }
    })
}

8，删除数据

/**
 * 删除数据
 */
export function deleteDB(db, storeName, id) {
    let request = db.transaction([storeName],'readwrite').objectStore(storeName).delete(id)
    return new Promise((resolve,reject) => {
        request.onsuccess = function(ev) {
            resolve(ev)
        }
        request.onerror = function(ev) {
            reject(ev)
        }
    })
}

9，删除数据库

/**
 * 删除数据库
 */
export function deleteDBAll(dbName) {
    console.log(dbName);
    let deleteRequest = window.indexedDB.deleteDatabase(dbName);
    return new Promise((resolve, reject) => {
        deleteRequest.onerror = function(event) {
            console.log('删除失败');
        }
        deleteRequest.onsuccess('删除成功')
    })
}

10，关闭数据库

/**
 * 关闭数据库
 */
export function closeDb(db) {
    db.close();
    console.log('数据库已关闭');
}