IndexedDB 使用

//第一步打开IndexedDB 参数1:表的名字 参数2:版本号
var request = window.indexedDB.open('userInfo', '1')
var db;
//打开数据库连接
request.onsuccess = function(event) {
    db = request.result;
    console.log('数据库打开成功');
};
//这个钩子只在表的版本发生改变时触发**
request.onupgradeneeded = function(event) {
            db = event.target.result;
            //创建表=>person      keyPath为主键,当你不想使用自定义主键时添加{ autoIncrement: true }
            var objectStore = db.createObjectStore('person', { keyPath: 'id' });
            //unique是否可以重复**unique=true为不可以重复
            objectStore.createIndex('name', 'name', { unique: false });
            objectStore.createIndex('email', 'email', { unique: true });
        }


//读取表内所有值
// params : 数据库名称,表名
export function readAll(dbName, tableName) {
    // 请求打开数据库
    let request = indexedDB.open(dbName);
    // 请求成功的回调函数
    request.onsuccess = function (e) {
        // db = e.target.result // 获取实例
        // transaction = db.transaction(tableName,'readwrite'); // 权限控制
        // objectStore = transaction.objectStore(tableName); // 进行操作对象
        let objectStore = e.target.result.transaction(tableName, 'readwrite').objectStore(tableName);
        // 打开游标
        let cursor = objectStore.openCursor();
        // 储存值
        let arr = [];
        // 成功打开游标的回调函数
        cursor.onsuccess = function (e) {
            let result = e.target.result;
            if (result) {
                // 将数据一条一条保存到arr中
                arr.push(result.value);
                result.continue();
            } else {
                if (!arr) {
                    console.log('没有数据....');
                } else {
                    console.log('[' + tableName + ']表中的数据为:' + JSON.stringify(arr));
                }
            }
        }
    }
}
// 删除数据库
export function deleteDB(dbName) {
    try {
        // 删除数据库使用 indexedDB对象的deleteDatabase方法
        let request = indexedDB.deleteDatabase(dbName);
        request.onerror = function () {
            console.log('删除[' + dbName + ']数据库失败!!!!');
        }
        request.onsuccess = function () {
            console.log('删除[' + dbName + ']数据库成功!!!!');
        }
    } catch (e) {
        console.log('删除[' + dbName + ']数据库出现错误,' + e.getMessage);
    }
}

// 关闭数据库
export function colseDB(dbName) {
    dbName.close();
}
// 新增数据
// 数据库名称,对象仓库(表名),传入的参数
export function insert(dbName, objectStoreName, argument) {
    // 打开数据库
    let request = indexedDB.open(dbName);
    // 请求数据库成功的回调函数
    request.onsuccess = function (success) {
        // 获取数据库实例对象
        let db = success.target.result;
        // 对某个表 进行事务操作的事务权限控制 
        let transaction = db.transaction(objectStoreName, 'readwrite');
        // 对表进行操作
        let objectStore = transaction.objectStore(objectStoreName)
        // 使用add方法,此方法是异步的
        // 有success,error事件
        //objectStore.add(argument);
        // 使用定义add方法
        let add = objectStore.add(argument);

        let msg = JSON.stringify(argument);

        // 添加成功的回调函数
        add.onsuccess = function (e) {
            console.log(e);
            console.log('向表[' + objectStoreName + ']新增一条数据为[' + msg + ']成功!!');
        }
        add.error = function (e) {
            console.log('向表[' + objectStoreName + ']新增一条数据为[' + msg + ']失败!!');
        }
    }

}
// 查询数据
// 数据库名,对象仓库(表名),查询参数(键名对应的值)
export function getData(dbName, objectStoreName, selectArgument) {
    // 打开数据库
    let request = indexedDB.open(dbName);
    // 请求打开数据库的回调函数
    request.onsuccess = function (success) {
        let db = success.target.result;
        let transaction = db.transaction([objectStoreName], 'readwrite');
        let objectStore = transaction.objectStore(objectStoreName);
        let getResult = objectStore.get(selectArgument);
        getResult.onsuccess = function (e) {
            console.log(e.target.result);
        }
    }
}
// 更新数据
// 数据库名,表名,要更新数据的标志(id),新的数据
export function update(dbName, objectStoreName, id, newsData) {
    // 打开数据库
    let request = indexedDB.open(dbName);
    // 请求打开数据库的回调函数
    request.onsuccess = function (success) {
        // 获取到数据库的表
        let db = success.target.result;
        // 对表操作进行事务权限控制
        let transaction = db.transaction(objectStoreName, 'readwrite');
        // 对表进行操作
        let objectStore = transaction.objectStore(objectStoreName);
        // 根据键值 获取某个实例中的某条数据
        let getResult = objectStore.get(id);
        // 实例成功的回调函数
        getResult.onsuccess = function (e) {
            // 重新赋值
            objectStore.put(newsData, id);
        }
        // 实例失败的回调函数
        getResult.onerror = function (e) {
            console.log('数据更新失败!!');
        }
    }
}
//删除数据
export function delMessage(dbName, objectStoreName, id) {
    // 打开数据库
    let request = indexedDB.open(dbName);
    request.onsuccess = function (success) {
        // 获取到数据库的表
        let db = success.target.result;
        // 对表操作进行事务权限控制
        let transaction = db.transaction(objectStoreName, 'readwrite');
        // 对表进行操作
        let objectStore = transaction.objectStore(objectStoreName);
        let delFinal=objectStore.delete(id)
        delFinal.onsuccess = function () {
            console.log('delete complete');
        }
    }

}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 由于之前的项目采用过websql作为数据存储,就是因为websql和真机的sqlite都是属于关系型数据库,可以使...
    No刹那光辉阅读 1,120评论 0 0
  • WebSql 没等我用就早早的被废弃了,Cookie似乎又是后端的专属... 先看看localStorage 和 ...
    小遁哥阅读 2,464评论 0 0
  • IndexedDB 是一种低级API,用于客户端存储大量结构化数据(包括文件和blobs)。该API使用索引来实现...
    李轻舟阅读 989评论 0 3
  • 以下是我在学习IndexedDB时做的总结,为了方便以后使用时速查,特意记录如下: 一. IndexedDB介绍 ...
    科研者阅读 5,784评论 0 9
  • 前言 最近在做的项目上有离线功能,需要将大量的数据存储在前端。结合项目实际需求最后决定使用indexedDB来进行...
    雷银阅读 4,051评论 0 8