localForage使用
初始化项目
创建vue项目
npm init vue@latest
选择以下进行安装
安装依赖并启动项目
安装并引入localForage
函数方式
先简单封装一下localForage
/**
* 封装 localForage 的方法
*/
import localforage from "localforage";
/**
* 初始化
* @param {string} bucket 存储的表名
* @returns 存储的表
*/
export const initStore = (bucket = "web", storeName = "keyvaluepairs") =>
localforage.createInstance({
name: bucket,
// 支持config所有配置
storeName, // 仅接受字母，数字和下划线
description: "描述",
});
/**
* 存储数据
* @param {string} bucket 桶的实例
* @param {string} key 字段名
* @param {any} value 需要存储的数据
*/
export const setItem = (bucket = "web", key, value) => {
bucket.setItem(key, value);
};
/**
* 删除数据
* @param {string} bucket 桶的实力
* @param {string} key 需要删除的字段
*/
export const detItem = (bucket = "web", key) => {
bucket.removeItem(key);
};
/**
* 清空桶
* @param {string} bucket 桶的实例
*/
export const clearStore = (bucket = "web") => {
bucket.clear();
};
export const destroyedStore = (data = {}) =>
new Promise((resolve, reject) => {
localforage
.dropInstance(data)
.then(function () {
resolve(true);
})
.catch(function (err) {
reject(err);
});
});
export default {
init: initStore,
setItem,
detItem,
clearStore,
destroyedStore,
};
如果需要再一个存储中创建多个表的时候，每个表都需要设置一个数据
/** * 封装 localForage 的方法 */ import localforage from "localforage"; /** * 初始化 * @param {string} bucket 存储的表名 * @returns 存储的表 */ export const initStore = (bucket = "web", storeName = "keyvaluepairs") => localforage.createInstance({ name: bucket, // 支持config所有配置 storeName, // 仅接受字母，数字和下划线 description: "描述", }); /** * 存储数据 * @param {string} bucket 桶的实例 * @param {string} key 字段名 * @param {any} value 需要存储的数据 */ export const setItem = (bucket = "web", key, value) => { bucket.setItem(key, value); }; /** * 获取数据 * @param {string} bucket 桶的实例 * @param {string} key 需要获取的key * @returns */ export const getItem = (bucket = "web", key) => new Promise((resolve, reject) => { bucket .getItem(key) .then(res => { resolve(res); }) .catch(err => { reject(err); }); }); /** * 删除数据 * @param {string} bucket 桶的实力 * @param {string} key 需要删除的字段 */ export const detItem = (bucket = "web", key) => { bucket.removeItem(key); }; /** * 清空桶 * @param {string} bucket 桶的实例 */ export const clearStore = (bucket = "web") => { bucket.clear(); }; /** * 销毁数据库 * @param {Object} data * @param {string} data.name 存储的实例 * @param {string} data.storeName 存储表的名称 * @returns * */ export const destroyedStore = data => new Promise((resolve, reject) => { localforage .dropInstance(data) .then(function () { resolve(true); }) .catch(function (err) { reject(err); }); }); export default { init: initStore, setItem, getItem, detItem, clearStore, destroyedStore, };
- 在同库 同表 同字段的情况下会直接覆盖
- 在销毁的时候需要传递存储的名称，如果只需要删除数据表，那么就传递存储名称和表名
类方式
// 引入 localforage 库
import localforage from "localforage";
export class DB {
constructor(name, storeName = "keyvaluepairs", description = "") {
// 初始化 localforage 实例
this.db = localforage.createInstance({
name,
storeName,
description,
});
}
// 设置数据
async setItem(key, value) {
try {
await this.db.setItem(key, value);
} catch (error) {
console.error("Error setting item:", error);
}
}
// 获取数据
async getItem(key) {
try {
const value = await this.db.getItem(key);
return value;
} catch (error) {
console.error("Error getting item:", error);
return null;
}
}
// 删除数据
async removeItem(key) {
try {
await this.db.removeItem(key);
} catch (error) {
console.error("Error removing item:", error);
}
}
// 清空所有数据
async clear() {
try {
await this.db.clear();
} catch (error) {
console.error("Error clearing storage:", error);
}
}
async destroy() {
try {
// 清除所有数据
await this.db.clear();
// 如果使用的是 IndexedDB 或 WebSQL，可以尝试删除整个数据库
if (
// this.db._driver === "indexeddb" ||
this.db._driver === "websql" ||
this.db._driver === "asyncStorage"
) {
const dbName = this.db.config().name;
// localforage.removeDatabase(dbName);
localforage.dropInstance({ name: dbName });
}
// 清除可能存在的事件监听器
// this.db.removeListener();
} catch (error) {
console.error("Error destroying storage:", error);
}
}
}
使用
<script setup name="home">
import { DB } from "@/tools/localForageClass";
// class 存储库 class1表
let dbData = ref(null);
const initClass = () => {
dbData.value = new DB("aaa", "bbb");
};
const addClass = () => {
dbData.value.setItem("abc", 123);
};
const getData = async () => {
let data = await dbData.value.getItem("abc");
console.log("🚀 ~ getData ~ data:", data);
};
const delData = () => {
dbData.value.removeItem("abc");
};
const empty = () => {};
const destroyed = () => {
dbData.value.destroy();
};
</script>
<template>
<div class="class">
<el-button type="primary" size="default" @click="initClass" class="item">初始化班级</el-button>
<el-button type="primary" size="default" @click="addClass" class="item">班级增加数据</el-button>
<el-button type="primary" size="default" @click="getData" class="item">获取数据</el-button>
<el-button type="primary" size="default" @click="delData" class="item">删除数据</el-button>
<el-button type="primary" size="default" @click="empty" class="item">清空</el-button>
<el-button type="primary" size="default" @click="destroyed" class="item">销毁</el-button>
</div>
</template>
<style lang="scss" scoped>
.class {
display: flex;
align-items: center;
.item {
margin-right: 10px;
}
}
</style>
