vue3 + electron 桌面端使用LocalForage数据持久化

vue3 + electron 桌面端使用LocalForage数据持久化

1 安装 LocalForage

npm install localforage

2 封装 LocalForage

// src/utils/storage.js
import localforage from 'localforage'

// 创建独立的本地数据存储实例
const localDataStore = localforage.createInstance({
  name: 'okFactura',
  storeName: 'local_data',
  description: 'Local storage using IndexedDB',
  driver: localforage.INDEXEDDB // 指定存储类型 INDEXEDDB
})

/** 设置数据 */
const setItem = (key, value) => {
  const raw = JSON.parse(JSON.stringify(value));  // 脱响应式
  return localDataStore.setItem(key, raw);
}

/** 获取数据 */
const getItem = (key) => {
  return localDataStore.getItem(key)
}

/** 删除数据 */
const removeItem = (key) => {
  return localDataStore.removeItem(key)
}

/** 清空数据 */
const clear = () => {
  return localDataStore.clear()
}

export default {
  setItem,
  getItem,
  removeItem,
  clear
}

3 项目中使用

import storage from "@/utils/storage"

if (loginForm.value.rememberMe) {
    storage.setItem("username", loginForm.value.username);
    // encrypt() 自定义密码加密，一定要更换密钥对 
    storage.setItem("password", encrypt(loginForm.value.password));
    storage.setItem("rememberMe", loginForm.value.rememberMe);
} else {
    // 否则移除
    storage.removeItem("username")
    storage.removeItem("password")
    storage.removeItem("rememberMe")
}

// 获取是异步的
const tenantCode = await storageByLocal.getItem("tenantCode");

4 注意事项

1 指定存储类型： indexDB webSql localStory

-- 默认顺序：indexDB webSql localStory
-- 通过config 指定 driver: localforage.INDEXEDDB 

2 存储获取不需要编译

-- 不管什么数据类型，存储和获取都不改变数据类型，可以直接存储获取

3 很好的兼容 web 和 electron 环境

4 vue3响应式存储，需要脱响应式

const raw = JSON.parse(JSON.stringify(value));  // 脱响应式
return localforage.setItem(key, raw);

5 为了区分业务，可以封装多个 storage

-- 注意：封装多个 storage，一定要"创建独立的本地数据存储实例"!!!,否则会出现同一个数据库，表之间数据存储读取异常！！

6 处理存储form表单嵌套响应式的数据

可以用 Vue 的 `toRaw()` + `structuredClone()` 组合，安全处理复杂嵌套结构
import { toRaw } from 'vue'
const deepClone = (obj) => {
  #`toRaw()` 会把 Vue 响应式对象还原为原始对象，`structuredClone()` 是浏览器提供的深克隆工具，支持 Date、Blob、数组等复杂结构
  return structuredClone(toRaw(obj)) // 精准、可靠
}

const setItem = (key, value) => {
  const raw = deepClone(value);
  return localforage.setItem(key, raw);
}

7 key必须是字符串

如果传递的不是字符串，需要在封装的方法中处理key
// 获取key
function getKeyToString(key) {
  return "Order_" + key
}