简单封装一下indexDB的功能

2 篇文章 0 订阅

简单的封装一下indexDB,具体的api使用方法可以去官网查询

//先定义数据库数据
var Salt = {
    name: 'myIndexDb',
    version: 1,
    db: null,
    table: 'myIndexDbTable'
}
/**
 * 增加或更新indexDB字段的值
 * @param {*} key 传递过来的键(在存储的时候)
 * @param {*} val 传递过来的值(在存储的时候)
 * @param {*} back 回调函数
 * @param {*} value 整个数据,需要更新的,是更新的值
 */

var INDEXDB = {
    openDB(name, version, table, callback) {
        var request = window.indexedDB.open(name, version);
        request.onerror = function (e) {
            console.log(e.currentTarget.error.message);
        };
        request.onsuccess = function (e) {
            Salt.db = e.target.result;
            if (callback && (typeof callback === 'function')) {
                callback(Salt.db)
            }
        };
        request.onupgradeneeded = function (e) {
            var db = e.target.result;
            if (!db.objectStoreNames.contains(table)) {
                db.createObjectStore(table, {
                    keyPath: "id"
                });
            }

        };
    },
    setItem(key, val) {
        INDEXDB.openDB(Salt.name, Salt.version, Salt.table, function () {
            try {
                var addData = [{
                    id: key,
                    value: val
                }]
                var transaction = Salt.db.transaction(Salt.table, 'readwrite');
                var store = transaction.objectStore(Salt.table);
                for (var i = 0; i < addData.length; i++) {
                    store.add(addData[i]);
                }
                INDEXDB.closeDB()
            } catch (error) {
                console.log(error);
            }
        });
    },
    getItem: function (val, back) {
        INDEXDB.openDB(Salt.name, Salt.version, Salt.table, function () {
            var transaction = Salt.db.transaction(Salt.table, 'readwrite');
            var store = transaction.objectStore(Salt.table);
            var request = store.get(val);
            request.onsuccess = function (e) {
                if (back && (typeof back === 'function')) {
                    if (e.target.result) {
                        back(e.target.result.value)
                    } else {
                        back('')
                    }
                    INDEXDB.closeDB()
                }

            }
        })
    },
    putItem(key, value) {
        INDEXDB.openDB(Salt.name, Salt.version, Salt.table, function () {
            var transaction = Salt.db.transaction(Salt.table, 'readwrite');
            var store = transaction.objectStore(Salt.table);
            var request = store.get(key);
            request.onsuccess = function (e) {
                try {
                    var resultData = e.target.result;
                    resultData.value = value;
                    var resultInfo = store.put(resultData);
                    resultInfo.onsuccess = function (e) {
                        if (e.type == 'success') {
                            INDEXDB.closeDB()
                        }
                    }
                } catch (error) {
                    INDEXDB.setItem(key, value)
                }
            };
        })

    },
    deleteItem(key) {
        INDEXDB.openDB(Salt.name, Salt.version, Salt.table, function () {
            var transaction = Salt.db.transaction(Salt.table, 'readwrite');
            var store = transaction.objectStore(Salt.table);
            var result = store.delete(key);
            result.onsuccess = function (e) {
                if (e.type == 'success') {
                    INDEXDB.closeDB()
                }
            }
        })
    },
    clearTable() {
        INDEXDB.openDB(Salt.name, Salt.version, Salt.table, function () {
            var transaction = Salt.db.transaction(Salt.table, 'readwrite');
            var store = transaction.objectStore(Salt.table);
            var result = store.clear();
            result.onsuccess = function (e) {
                if (e.type == 'success') {
                    INDEXDB.closeDB()
                }
            }
        })
    },
    closeDB() {
        console.log(Salt);
        Salt.db.close();
    },
}
//初始化数据库
INDEXDB.openDB(Salt.name, Salt.version, Salt.table);

export default INDEXDB

// // 使用方法,在对应的文件进行引入

 import INDEXDB from './myIndexDB'
 // 存储数据
INDEXDB.setItem('data', 'insertData');
// // 取出数据
 INDEXDB.setItem('data', (res) => {
     console.log(res);
 })
 //删除数据
 INDEXDB.deleteItem('data');
//修改数据
 INDEXDB.putItem('data','newData')
// 清空数据表
 INDEXDB.clearTable()
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值