Vue3项目之IndexedDB 数据存储方案(二)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
IndexedDB 数据存储方案
2、数据库与对象仓库的创建
在 utils
文件夹下新建 indexedDB.ts
export default class IndexedDB {
private dbName: string
private db: any // 数据库实例
constructor(dbName: string) {
this.dbName = dbName
}
// 打开数据库 参数:对象仓库名称、主键、索引数组(可选)
openStore(storeName: string, keyPath: string, indexs?: Array<string>) {
let request = window.indexedDB.open(this.dbName, 2) // 名称 版本号(不可回退)
// 数据库打开成功的回调
request.onsuccess = (e) => {
console.log('数据库打开成功')
console.log(e);
// 赋值数据库实例
this.db = e.target.result
}
// 数据库打开失败的回调
request.onerror = function (e) {
console.log('数据库打开失败')
console.log(e);
}
// 数据库更新成功的回调
request.onupgradeneeded = function (e) {
console.log('数据库更新成功')
const { result } = e.target
// 创建对象仓库(传入仓库名和主键名,主键设置为递增)
const store = result.createObjectStore(storeName, {
autoIncrement: true, keyPath
})
// 创建该对象仓库属性的索引
if(indexs && indexs.length > 0) {
indexs.map(function(i: string) {
store.createIndex(i, i, { unique: true })
})
}
// 对象仓库创建成功的回调
store.transaction.oncomplete = function(e) {
console.log('对象仓库创建成功');
console.log(e);
}
}
}
}
实例化数据库:1、创建数据库 2、打开对象仓库
import IndexedDB from '@/utils/indexedDB'
// 创建数据库
const airbnDB = new IndexedDB('airbnDB')
airbnDB.openStore('room','id', ['hose', 'shu'])
仓库名为 ‘room’,主键命名为 ‘id’
单独理解一下:createIndex
能够给当前的存储空间设置一个索引。它接受三个参数
- 第一个参数,索引的名称。
- 第二个参数,指定根据存储数据的哪一个属性来构建索引。
- 第三个属性, options对象,其中属性
unique
的值为true
表示不允许索引值相等。
// 创建该对象仓库属性的索引
if(indexs && indexs.length > 0) {
indexs.map(function(i: string) {
store.createIndex(i, i, { unique: false })
})
}
目前还没理解有什么用…
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)