Vue使用 IndexDB vue操作IndexDB数据库 Vue操作IndexDB数据库_vue indexdb

最新推荐文章于 2024-06-01 15:46:07 发布

玉泽写

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量1.1k

点赞数 9

分类专栏： 2024年程序员学习文章标签： vue.js 数据库前端

本文链接：https://blog.csdn.net/2301_77033583/article/details/137491982

版权

2024年程序员学习专栏收录该内容

68 篇文章 0 订阅

订阅专栏

或者使用 yrm

yarn add localforage

引入 localForage

在 main.js 中引用

import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’

// IndexDB封装类库 https://localforage.github.io/localForage/#installation
import localforage from ‘localforage’

Vue.use(localforage)

// 将 localforage 挂载到全局示例, 这样就可以在任何地方用 this. $l oc a l f or a g e 操作 V u e . p ro t o t y p e .$ localforage = localforage

console.info(‘localforage初始化成功，使用 this.$localforage 调用’)

// 创建一个默认的 IndexDB数据库挂载到全局
const demoDataBase = localforage.createInstance({
name: ‘demoDataBase’
})

Vue.prototype. $d e m oD a t a B a se = d e m oD a t a B a seco n so l e . in f o (^{'} 默认数据库 d e m oD a t a B a se 初始化成功，使用 t hi s .$ demoDataBase 调用’)

Vue.config.productionTip = false

new Vue({
el: ‘#app’,
router,
components: { App },
template: ‘’
})

测试新增数据、获取数据

在 demoDataBase数据库新增一条数据

// 操作 demoDataBase数据库
this.$demoDataBase.setItem(‘测试demoDataBase’, ‘我是测试值’).then(function (value) {
// Do other things once the value has been saved.
console.log(value)
}).catch(function (err) {
// This code runs if there were any errors
console.log(err)
})

// 不需要回调
this.$demoDataBase.setItem(‘测试demoDataBase2’, ‘我是测试值2’)

查看是否生效，数据已经新增上去了，一共两条

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数大数据工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年大数据全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。