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

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

1 安装 LocalForage

npm install localforage

2 封装 LocalForage

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

// 强制使用 IndexedDB 作为存储驱动
localforage.config({
  name: 'okFactura',
  storeName: 'local_data',
  description: 'Local storage using IndexedDB',
  driver: localforage.INDEXEDDB  // 指定存储类型
})

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

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

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

/** 清空数据 */
const clear = () => {
  return localforage.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")
}

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

#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);
    }