IndexedDB封装

文章目录

IndexedDB封装
- 封装（增，删除，查）：
- 使用

IndexedDB封装

封装（增，删除，查）：


var inquiryDB = function (cb) {var obj = new Object();obj.name = "imChat";obj.version = 1;obj.db = null;obj.storeName = "inquiry";// 新增一条聊天记录obj.addMsg = function (msg) {var transaction = obj.db.transaction(obj.storeName, 'readwrite');var store = transaction.objectStore(obj.storeName);store.add(msg);// console.log(msg);}// 查询聊天记录  obj.queryMsg = function (targetId, doctorId, method) {var transaction = obj.db.transaction(obj.storeName);var store = transaction.objectStore(obj.storeName);var request = store.openCursor();// 定义数组var dataArr = new Array();//查询到结果request.onsuccess = function (e) {var cursor = e.target.result;//判断结果是否为空if (cursor) {var id = cursor.key;var obj = cursor.value;//比对查询的数据是否是传入参数一致if (obj.targetId == targetId & obj.doctorId == doctorId) {// console.log(obj);// 把每一个对象push数组中dataArr.push(obj);// console.log(dataArr);}//继续查询cursor.continue();} else {method(dataArr);}};}// 删除记录obj.deleteMsgByKey = function (targetId, doctorId) {var transaction = obj.db.transaction(obj.storeName, 'readwrite');var store = transaction.objectStore(obj.storeName);var request = store.openCursor();//查询到结果request.onsuccess = function (e) {var cursor = e.target.result;//判断结果是否为空if (cursor) {var id = cursor.key;// console.log(id);var obj = cursor.value;//比对查询的数据是否是传入参数一致if (obj.targetId == targetId & obj.doctorId == doctorId) {//查询到指定数据， 执行回调//method(obj);store.delete(id);}//继续查询cursor.continue();}};}// 新增表obj.addTable = function (result) {if (!result.objectStoreNames.contains(obj.storeName)) {result.createObjectStore(obj.storeName, {autoIncrement: true});}}// 打开数据库obj.openDB = function (cb) {var version = obj.version || 1;var request = window.indexedDB.open(obj.name, version);request.onerror = function (e) {console.log(e.currentTarget.error.message);};request.onsuccess = function (e) {obj.db = e.target.result;cb && cb()};request.onupgradeneeded = function (e) {console.log("DB");obj.addTable(e.target.result);};}obj.openDB(cb);return obj;
};// 删除数据库
function deleteDB(storeName) {window.indexedDB.deleteDatabase(storeName);
}

使用

var db = inquiryDB(indexDBWrap);
db.queryMsg (targetId, doctorId, function (e) {.......执行业务
})

IndexedDB封装相关推荐

一行代码，搞定浏览器数据库 IndexedDB
作者 | 星尘starx 来源 | https://juejin.cn/post/6918705632757415950 前言 2021 年,如果你的前端应用,需要在浏览器上保存数据,有三个主流方案可 ...
indexed true mysql_一行代码，搞定浏览器数据库 IndexedDB
前言 2021 年,如果你的前端应用,需要在浏览器上保存数据,有三个主流方案可以选择: Cookie:上古时代就已存在,但能应用的业务场景非常有限 LocalStorage:使用简单灵活,但是容量只有 ...
富交互Web应用中的撤销和前进
在web应用中,用户在进行一些富交互行为的操作时难免会出现误操作,比如在富文本编辑器设置错了字体颜色就需要撤回,做H5活动页面的时候不小心删了一个图片也需要撤回,更比如在线设计原型图应用的时候不小心删 ...
electron 桌面端业务中的小结(坑)
文章目录简介安装electron依赖本地数据库选择 indexedDB 封装的库 SQLite Lowdb electron-store electron-json-storage-alt.el ...
php indexdb,浏览器端数据库存储方案的整理 -- indexDB 和 localStorage
有些安全性不太重要的数据,我不想花大力气搞一台服务器,再安装mysql或者 monogdb,再写点rest接口.这也太麻烦了,浏览器里本来就有很好用的数据库.你为什么不尝试一下呢? 1. 客户端存储目 ...
IndexedDB 简单封装
IndexedDB 浏览器数据库,是一个非关系型数据库,数据形式使用的是json,IndexedDB适合存储大量数据,它的API是异步调用的,当然他的api 也相对复杂. 当然浏览器数据存储还有Lo ...
indexedDB简易封装
初学的时候写的demo,实际工作使用LOCALFORAGE库即可. /* indexedDB:讲道理是用在离线状态下储存大量的结构化数据操作风格就跟axios一样,是请求相比于cookie,这个的优势 ...
IndexedDB 代码封装、性能摸索以及多标签支持
前言当一个 Javascript 程序需要在浏览器端存储数据时,你有以下几个选择: Cookie:通常用于 HTTP 请求,并且有 64 kb 的大小限制. LocalStorage:存储 key- ...
浏览器数据库IndexedDB介绍
摘要在移动端H5页面开发的时候,为了更好的提高用户体验,可以对不常变化的数据做浏览器端数据缓存,在用户打开页面的时候,首先加载本地的数据,然后异步请求服务端,更新数据.在移动端webview中,可以 ...
小议IndexedDB中的主要对象
IndexedDB是在客户端的浏览器里存储大量数据的一个方案,网易云信的IM也使用了IndexedDB来存储客户的本地消息,而且随着PWA的兴起,学会使用IndexedDB是必不可少的.本文主要将In ...

IndexedDB封装

文章目录

IndexedDB封装

封装（增，删除，查）：

使用

IndexedDB封装相关推荐

最新文章

热门文章