indexedDB聊天记录存储方法总结

前段时间项目需要本地存储聊天数据,使用到indexedDB,经查阅大量文章,终于完成。感觉网上indexedDB的文章不够多,也不够完善,因此把代码分享出来,帮助需要的小伙伴。由于时间原因,不做详细介绍,后续再补充说明。
打开数据库

IndexedDB.openDB(myDB.name,myDB.version,function (e) {
    //成功回调
});

添加数据:

IndexedDB.addData(myDB.db,"talkList",[{id:serverMsgId,name:nickName,target:muid.toLocaleLowerCase(),time:time,type:2,msg:tempmsg}]);

查询数据:

IndexedDB.getDataByMultiple(myDB.db,"talkList","target",id.toLocaleLowerCase(),function (e) {
   //成功回调
});

indexedDB.js:

var myDB = {
    name: 'GRTalk',
    version: 1,
    db: null,
    ojstore: [
        {
            name: 'name',//存储空间表的名字
            keypath: 'id'//主键
        }
    ]
};
var IndexedDB = {
    indexedDB: window.indexedDB || window.webkitindexedDB,
    IDBKeyRange: window.IDBKeyRange || window.webkitIDBKeyRange,//键范围
    openDB: function (dbname, dbversion, callback) {
        //建立或打开数据库,建立对象存储空间(ObjectStore)
        var self = this;
        var version = dbversion || 1;
        var request = self.indexedDB.open(dbname, version);
        request.onerror = function (e) {
            console.log(e.currentTarget.error.message);
        };
        request.onsuccess = function (e) {
            myDB.db = e.target.result;
            console.log('成功建立并打开数据库:' + myDB.name + ' version' + dbversion);
            callback && callback(e);
        };
        request.onupgradeneeded = function (e) {
            var db = e.target.result;
            if (!db.objectStoreNames.contains('talkList')) {
                var objectStore = db.createObjectStore('talkList', {keyPath: 'id'});
                objectStore.createIndex('target', 'target', {unique: false});
            }
        }
    },
    deletedb: function (dbname) {
        //删除数据库
        var self = this;
        self.indexedDB.deleteDatabase(dbname);
        console.log(dbname + '数据库已删除')
    },
    closeDB: function (db) {
        //关闭数据库
        db.close();
        console.log('数据库已关闭')
    },
    addData: function (db, storename, data) {
        //添加数据,重复添加会报错
        try{
            var store = db.transaction(storename, 'readwrite').objectStore(storename), request;
        }catch (e) {
            alert(e)
        }
        for (var i = 0; i < data.length; i++) {
            request = store.add(data[i]);
            request.onerror = function () {
                //alert('add添加数据库失败')
            };
            request.onsuccess = function () {
                //alert('add添加数据已存入数据库')
            };
        }

    },
    putData: function (db, storename, data) {
        //添加数据,重复添加会更新原有数据
        var store = store = db.transaction([storename], 'readwrite').objectStore(storename), request;
        for (var i = 0; i < data.length; i++) {
            request = store.put(data[i]);
            request.onerror = function () {
                console.error('put添加数据库中已有该数据')
            };
            request.onsuccess = function () {
                console.log('put添加数据已存入数据库')
            };
        }
    },
    getDataByStore: function (db, storename, cb) {
        var store = db.transaction([storename], 'readwrite').objectStore(storename);
        var allRecords = store.getAll();
        allRecords.onsuccess = function () {
            cb && cb(allRecords.result);
        };

    },
    getDataByKey: function (db, storename, key, cb) {
        //根据存储空间的键找到对应数据
        var store = db.transaction([storename], 'readwrite').objectStore(storename);
        var request = store.get(key);
        request.onerror = function () {
            console.error('getDataByKey error');
        };
        request.onsuccess = function (e) {
            var result = e.target.result;
            console.log('查找数据成功');
            cb && cb(result);
        };
    },
    getDataByTarget: function (db, storename, target, cb) {
        try {
            var store = db.transaction([storename], 'readonly').objectStore(storename);
            var index = store.index('target');
            var request = index.get(target);
            request.onerror = function () {
                console.error('getDataByTarget error');
            };
            request.onsuccess = function (e) {
                var result = e.target.result;
                console.log('查找数据成功');
                cb && cb(result);
            };
        } catch (e) {
            console.log("数据不存在");
        }

    },
    getDataByFetch: function (db, storeName) {
        var transaction = db.transaction(storeName);
        var store = transaction.objectStore(storeName);
        var request = store.openCursor();
        request.onsuccess = function (e) {
            var cursor = e.target.result;
            if (cursor) {
                console.log(cursor.key);
                var currentStudent = cursor.value;
                console.log(currentStudent.name);
                cursor.continue();
            }
        };
    },
    getDataByMultiple: function (db, storeName, key, id, cb) {
        var transaction = db.transaction(storeName);
        var store = transaction.objectStore(storeName);
        var keyRange = IDBKeyRange.only(id);
        var req = store.index(key).openCursor(keyRange, "next");
        req.onsuccess = function (e) {
            var arr = [];
            var cursor = e.target.result;
            if (cursor) {
                var res = cursor.value;
                console.log(res);
                arr.push(res);
                cb && cb(arr);
                cursor.continue();
            }

        }
    },
    deleteData: function (db, storename, key) {
        //删除某一条记录
        var store = store = db.transaction(storename, 'readwrite').objectStore(storename);
        store.delete(key);
        console.log('已删除存储空间' + storename + '中' + key + '记录');
    },
    clearData: function (db, storename) {
        //删除存储空间全部记录
        var store = db.transaction(storename, 'readwrite').objectStore(storename);
        store.clear();
        console.log('已删除存储空间' + storename + '全部记录');
    }
}

你可能感兴趣的:(javascript,前端,html)