一、在main.js中引用indexDb

import Vue from 'vue'
import indexDb from './api/indexDb'let storeName  = { index: ['tableView'], name: 'tableView', key: 'menuid' } //index:索引、name:表名、key:主键
indexDb.openDB('spreadTableView', 1, storeName, function(db){Vue.prototype.$tableDb = db //全局保存数据库
})

2、操作数据库方法

//举例，业务代码
...
<script>
import indexDb from './api/indexDb'
...
export default {...mounted(){let list = [{...}]let allDbData = indexDb.getAllData(this.$tableDb, 'tableView')let flagIndex = indexDb.readAllData(this.$tableDb, list)if(flagIndex == -1){indexDb.addData(this.$tableDb, 'tableView', list)}else{indexDb.updateData(this.$tableDb, 'tableView', list)}}...
}
</script>

3、封装indexDb.js

export default {// indexedDB兼容indexedDB: window.indexedDB || window.webkitindexedDB || window.msIndexedDB || window.mozIndexedDB,/*** 打开数据库* 新对象储存空间newStore参数：newStore.name、newStore.key* 新增对象存储空间要更改数据库版本* @param {数据库名称} dbname * @param {版本} version * @param {数据库} db * @param {配置} newStore * @param {回调函数} callback */openDB(dbname, version, newStore, callback) {let dbversion = version || 1;const request = this.indexedDB.open(dbname, version);request.onerror = function () {console.log('IndexedDB数据库打开错误');};request.onsuccess = function (event) {db = event.target.result;if (callback && (typeof callback === 'function')) {callback(db);}};// onupgradeneeded，调用创建新的储存空间request.onupgradeneeded = function (event) {db = event.target.result;if (newStore) {if (!db.objectStoreNames.contains(newStore.name)) {const objectStore = db.createObjectStore(newStore.name, {keyPath: newStore.key,});newStore.index.forEach(item => {objectStore.createIndex(item + '_index', item, {unique: false});})}}};},/*** 删除数据库* @param {*} dbname * @param {*} callback */deleteDb(dbname, callback) {const deleteQuest = this.indexedDB.deleteDatabase(dbname);deleteQuest.onerror = function () {console.log('删除数据库出错');};deleteQuest.onsuccess = function () {if (callback && (typeof callback === 'function')) {callback();}}},/*** 关闭数据库* @param {*} dbname */closeDB(dbname) {dbname.close();console.log('数据库已关闭');},/*** 删除数据* @param {*} db * @param {*} storename * @param {*} key * @param {*} callback */deleteData(db, storename, key, callback) {const store = db.transaction(storename, 'readwrite').objectStore(storename);const request = store.delete(key);request.onsuccess = function () {if (callback && (typeof callback === 'function')) {callback('删除成功');}}request.onerror = function () {if (callback && (typeof callback === 'function')) {callback('删除失败');}}},/*** 清空数据* @param {*} db * @param {*} storename * @param {*} callback */clearData(db, storename, callback) {const store = db.transaction(storename, 'readwrite').objectStore(storename);const request = store.clear();request.onsuccess = function () {if (callback && (typeof callback === 'function')) {callback('清空数据成功');}}request.onerror = function () {if (callback && (typeof callback === 'function')) {callback('清空数据失败');}}},/*** 添加数据* @param {*} db * @param {*} storename * @param {*} obj */addData(db, storename, list) {const store = db.transaction(storename, 'readwrite').objectStore(storename);list.forEach(ls => {const request = store.add(ls);request.onsuccess = function () {console.log('数据写入成功');};request.onerror = function () {console.log('数据写入失败');}})},/*** 更新数据* @param {*} db * @param {*} storename * @param {*} obj */updateData(db, storename, list) {const store = db.transaction(storename, 'readwrite').objectStore(storename);list.forEach(ls => {const request = store.put(ls);request.onsuccess = function () {console.log('数据更新成功');};request.onerror = function () {console.log('数据更新失败');}})},/*** 根据主键获取数据* @param {*} db * @param {*} storeName * @param {*} key * @returns */getData(db, storeName, key){var objectStore = db.transaction(storeName).objectStore(storeName);var request = objectStore.get(key);request.onerror = function(event) {console.log('事务失败');};return new Promise((resolve, reject) => {request.onsuccess = function (e) {resolve(e.target.result)}})},/*** 根据索引获取数据* @param {*} db * @param {*} storeName * @param {*} field * @param {*} val */getDataByIndex(db, storeName, field, val) {const objectStore = db.transaction(storeName).objectStore(storeName);const index = objectStore.index(field + '_index');const request = index.get(val);return new Promise((resolve, reject) => {request.onsuccess = function (e) {resolve(e.target.result)}})},/*** 获取全部数据* @param {*} db * @param {*} storeName * @returns */getAllData(db, storeName) {const objectStore = db.transaction(storeName).objectStore(storeName);const request = objectStore.openCursor();let data = [];return new Promise((resolve, reject) => {request.onsuccess = function (e) {var cursor = e.target.result;if (cursor) {data.push(cursor.value);cursor.continue();} else {resolve(data)}}})},/*** 遍历全部数据，判断数据是否已存在于数据库* @param {*} allDbData* @param {*} list* @returns */readAllData(allDbData, list){let flagIndexallDbData.then(res => { flagIndex = res.findIndex(val=>{return (val.menuid == list[0].menuid)})})return flagIndex}
}

vue中indexDb缓存使用相关推荐

vue中keep-alive缓存的使用
keep-alive是什么? <keep-alive /> 是一个vue中内置组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中. 使用<keep-alive /& ...
vue中keepAlive缓存清除的问题
vue项目中经常会用到keepalive来做缓存,在应付基本要求上可以说非常方便.但是遇到同一个页面,根据条件不同,分别缓存或者不缓存,就有些麻烦了. 首先先把坑列出来: 1. <keep-al ...
vue中页面缓存后destroyed失效，如何关闭定时器
场景页面中设置了定时器,如果组件销毁是没有关闭定时器,他还会一直执行,会非常耗性能,所以需要及时关闭定时器. 关闭定时器 vue项目中,正常情况下,我们在生命周期 destroyed 中关闭即可,一 ...
keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处在做电商有关的项目中 ...
vue中怎么清空tab选项卡的缓存_vue Tab切换以及缓存页面处理的几种方式
前言相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换使用动态组件,相信大家都能看懂(部分代码省略) ...
vue中的浏览量_vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
从列表页 ------> 详情页, 再从详情页 -----> 列表页 ,要保存上次已经加载的数据和自动还原上次的浏览位置 1. 缓存组件,vue2中提供了keep-alive.首先在我们的 ...
vue中使用keepAlive组件缓存遇到的坑
项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
vue中,我们所要实现的一个场景就是: 1.搜索页面==>到搜索结果页时,搜索结果页面要重新获取数据, 2.搜索结果页面==>点击进入详情页==>从详情页返回列表页时,要保存上次已经 ...
vue缓存服务器文件到本地,vue中,在本地缓存中读写数据的方法
1.安装good-storage插件 cnpm i good-storage --save 2.读/写的方法 common/js/cache.js: import storage from 'good ...

vue中indexDb缓存使用

一、在main.js中引用indexDb

2、操作数据库方法

3、封装indexDb.js

vue中indexDb缓存使用相关推荐

最新文章

热门文章