使用本地文件进行持久化存储数据，一般不会把用户的个性化数据存储在应用程序的安装目录下，因为安装目录是不可靠的，应用程序升级或卸载重装都可能导致安装目录被清空，操作用户数据丢失。好在操作系统为应用程序提供了一个专有目录来存储应用程序的个性化数据：`C:\Users\username\AppData\Roaming` 在 `electron` 中，可以使用 `app.getPath` 通过传入不同的参数来获取不同用途的路径，对应的参数说明如下： * `home` 用户的 home 文件夹（主目录） * `appData` 每个用户的应用程序数据目录，默认情况下指向： * `%APPDATA%` Windows 中 * `$XDG_CONFIG_HOME` or `~/.config` Linux 中 * `~/Library/Application Support` macOS 中 * `userData` 储存你应用程序配置文件的文件夹，默认是 `appData` 文件夹附加应用的名称按照习惯用户存储的数据文件应该写在此目录，同时不建议在这写大文件，因为某些环境会备份此目录到云端存储。 * `sessionData` 此目录存储由 `Session` 生成的数据，例如 localStorage，cookies，磁盘缓存，下载的字典，网络状态，开发者工具文件等。默认为 `userData` 目录。 Chromium 可能在此处写入非常大的磁盘缓存，因此，如果您的应用不依赖于浏览器存储（如 localStorage 或 cookie）来保存用户数据，建议将此目录设置为其他位置，以避免污染 `userData` 目录。 * `temp` 临时文件夹 * `exe`当前的可执行文件 * `module` The `libchromiumcontent` 库 * `desktop` 当前用户的桌面文件夹 * `documents` 用户文档目录的路径 * `downloads` 用户下载目录的路径 * `music` 用户音乐目录的路径 * `pictures` 用户图片目录的路径 * `videos` 用户视频目录的路径 * `recent` 用户最近文件的目录 (仅限 Windows)。 * `logs`应用程序的日志文件夹 * `crashDumps` 崩溃转储文件存储的目录 ```typescript app.getPath('userData') # C:\Users\username\AppData\Roaming\my-electron-app ``` ## Lowdb `lowdb` 是轻量级的本地 `json` 数据库官网： ### 安装依赖 ```typescript pnpm i lowdb ``` ### 基本使用 ```vue ``` 执行上述命令，则会在 `app.getPath('userData')` 目录下，生成 `db.json` 文件，内容如下： ```json { "users": [ { "id": 1, "username": "kunkun", "age": 18, "userType": "user", "email": "kunkun@qq.com", "sort": 10 } ] } ``` ### 扩展Lowdb 使用 `lodash` 扩展 `lowdb` ```shell pnpm i lodash ``` ```vue ``` 基本使用 ```vue ``` ### 数据加密 ```vue ``` ## Electron Store `electron-store` 可以为 `electron` 应用或模块提供简单的数据持久化 - 保存和加载用户设置、应用状态、缓存等功能。生成的数据会默认保存在 `app.getPath('userData')` 名为 `config.json` 文件下：官网： ### 安装依赖 ```shell pnpm i electron-store ``` ### 配置环境若要在渲染进程中使用 `electron-store`，需要进行如下配置： `background.ts` ```typescript import Store from 'electron-store' // 初始化 Store.initRenderer() ``` `vite.config.ts` ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import electron from 'vite-plugin-electron' import renderer from 'vite-plugin-electron-renderer' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), electron( { entry: 'src/background.ts', onstart: (options) => { options.startup() }, } ), // 在渲染进程中使用 electron api renderer({ resolve: { 'electron-store': { type: 'esm' } } }) ], }) ``` ### 基本使用经过上述操作配置，就可以在渲染进程中愉快的使用 `electron-store` 啦 ```vue ``` 经过上述测试，就会在 `app.getPath('userData')` 路径下，生成一个 `config.json` 的文件，内容如下： `config.json` ```json { "name": "kunkun" } ``` 其他操作 ```vue ``` ### 数据加密在实例化 `store` 时，添加 `encryptionKey` 属性并指定秘钥，`electron-store` 将使用 `aes-256-cbc` 加密算法对存储区进行加密 ```typescript const store = new Store({ // 文件夹名称 cwd: 'db', // 文件名 name: 'db', // 默认值 defaults: { users: [] }, // 数据加密 encryptionKey: 'secret' }) ``` ## Sqlite `SQLite` 是一个轻型的、嵌入式的 `SQL` 数据库引擎，其特点是自给自足、无服务器零配置、支持事务。它是在世界上部署最广泛的SQL数据库引擎。官网： ### 安装依赖 ```shell pnpm i sqlite3 pnpm i fs-extra ``` ### 配置环境在渲染进程中使用 `sqlite3`，需要在 `vite.config.ts` 中进行如下配置： `vite.config.ts` ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import electron from 'vite-plugin-electron' import renderer from 'vite-plugin-electron-renderer' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), electron( { entry: 'src/background.ts', onstart: (options) => { options.startup() }, } ), // 在渲染进程中使用 electron api renderer({ resolve: { 'electron-store': { type: 'esm' }, sqlite3: { type: 'cjs' }, 'fs-extra': { type: 'esm' } } }) ], }) ``` ### 基本使用 ```vue ``` 执行上述操作，就会在 `app.getPath('userData')/db` 目录下，生成一个名为 `db.db` 的文件，使用 `Navicat` 软件与该文件建立连接，就会看到刚刚建立的表，如下： ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a82fdb2580ed40f19f85cb59930ec4a9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6I-c6bif56CB54y_:q75.awebp?rk3s=f64ab15b&x-expires=1760389355&x-signature=JjI6ztlFDdGxoJf9C935MNrSEmk%3D) 继续执行其他相关操作 ```vue ``` 简易封装 ```vue ``` ### Prisma `Prisma` 是一个现代的数据库工具包，其中的 `Prisma ORM`（Object-Relational Mapping，对象关系映射）框架具有以下特点和优势： * 强大的数据库操作能力 * 跨数据库支持（ PostgreSQL、MySQL、SQLite 和 MongoDB ） * 自动生成数据库迁移脚本 * 类型安全 * 活跃的社区和文档官网： #### 安装依赖 ```shell pnpm i prisma ``` #### 创建模型使用 `Prisma CLI` 的 `init` 命令设置 `Prisma ORM` ```shell npx prisma init --datasource-provider sqlite ``` 执行上述命令后，将会在项目根目录上创建一个带有 `schema.prisma` 文件的新 `prisma` 目录，并将 `SQLite` 配置为你的数据库，并且还会多个一个 `.env` 文件，内容如下： `prisma/schema.prisma` ```typescript // This is your Prisma schema file, // learn more about it in the docs: https://pris.ly/d/prisma-schema generator client { provider = "prisma-client-js" } datasource db { provider = "sqlite" url = env("DATABASE_URL") } ``` `.env` ```shell # This was inserted by `prisma init`: # Environment variables declared in this file are automatically made available to Prisma. # See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB. # See the documentation for all the connection string options: https://pris.ly/d/connection-strings DATABASE_URL="file:./dev.db" ``` 对数据进行建模，在项目根目录 `prisma/schema.prisma` 文件下，建立如下模型 `prisma/schema.prisma` ```typescript // This is your Prisma schema file, // learn more about it in the docs: https://pris.ly/d/prisma-schema generator client { provider = "prisma-client-js" } datasource db { provider = "sqlite" url = env("DATABASE_URL") } // @id 主键 // @default(autoincrement()) 指定默认值是自增的数字 // @unique 指定唯一约束 // @relation 一对多关联，通过 authorId 关联到 User 的 id 字段 model User { id Int @id @default(autoincrement()) username String age Int userType String @default("user") email String @unique sort Int posts Post[] } model Post { id Int @id @default(autoincrement()) title String content String? published Boolean @default(false) author User @relation(fields: [authorId], references: [id]) authorId Int } ``` #### 创建数据库表使用 `Prisma Migrate` 运行迁移以创建数据库表 ```shell npx prisma migrate dev --name init ``` 执行上述命令后，它会在项目根目录下 `prisma/migrations` 生成并执行建表 `sql` 文件，并在 `prisma` 目录下创建 `dev.db` 文件 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/09ef941b018d463a9584440ff096044d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6I-c6bif56CB54y_:q75.awebp?rk3s=f64ab15b&x-expires=1760389355&x-signature=8Fw2iV0OKGPIj2EmVmml9Ygc2ug%3D) 使用 `Navicat` 软件连接 `dev.db` 文件，就能看到 `User` 和 `Post` 两张数据库表 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9ccd7a3d444e4aba9132ad37559935ed~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6I-c6bif56CB54y_:q75.awebp?rk3s=f64ab15b&x-expires=1760389355&x-signature=jQ8kHQ3NW%2FnWJOEsN0lXID2O2OU%3D) #### 配置环境如在渲染进程中使用 `prisma`，需要在 `vite.config.ts` 中进行如下配置： `vite.config.ts` ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import electron from 'vite-plugin-electron' import renderer from 'vite-plugin-electron-renderer' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), electron( { entry: 'src/background.ts', onstart: (options) => { options.startup() }, } ), // 在渲染进程中使用 electron api renderer({ resolve: { 'electron-store': { type: 'esm' }, sqlite3: { type: 'cjs' }, 'fs-extra': { type: 'esm' }, '@prisma/client': { type: 'esm' } } }) ], }) ``` #### 基本使用 ```vue ``` `Prisma ORM` 附带一个内置 `GUI`，用于查看和编辑数据库中的数据，使用如下命令： ```shell npx prisma studio ``` 则会自动在浏览器中打开链接： ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a83f26aed17a46b3882aef89fbffb46f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6I-c6bif56CB54y_:q75.awebp?rk3s=f64ab15b&x-expires=1760389355&x-signature=iDGvrNU5EdOny%2BNMCN41vK5%2Ffh4%3D) #### 动态设置路径一般将用户的个性化数据存储在 `app.getPath('userData')` 目录下，可以通过如下设置动态的进行文件路径 `background.ts` ```typescript import { app } from 'electron' import path, { resolve } from 'path' import fs from 'fs' const setDBPath = (dir: string, fileName: string) => { // 获取用户数据目录并设置数据存储路径 let dbPath = 'file:' + resolve(app.getPath('userData'), dir, fileName) // 获取 .env 文件路径 let envPath = resolve(process.cwd(), '.env') // 读取 .env 文件内容 let envContent = fs.readFileSync(envPath, 'utf-8') // 替换以 DATABASE_URL 开头的变量 let updateContent = envContent.replace(/DATABASE_URL=.*$/m, `DATABASE_URL=${dbPath}`) // 原始内容与更新后的内容不一致，则写入 if (updateContent !== envContent) { fs.writeFileSync(envPath, updateContent) } } app.whenReady().then(() => { setDBPath('db', 'dev.db') createWindow() }) ``` ## 浏览器技术存储 `Electron` 集成了 `Node` 和 `Chromium` 两大环境，因此，浏览器存储技术也适用于 `Electron` ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8d52a1e41d574238be44a707979732e6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6I-c6bif56CB54y_:q75.awebp?rk3s=f64ab15b&x-expires=1760389355&x-signature=zmpAdF5IvVfxrP5U0XcPynzGe2o%3D) ### Local Storage `Local Storage` 可以存储的数据量也不大，各浏览器限额不同，但都不会超过 `10MB`。它只能被客户端脚本访问，不会自动随浏览器请求被发送给服务端，服务端也无权设置 `Local Storage` 的数据。它存储的数据没有过期时间，除非手动删除，不然数据会一直保存在客户端。 ```typescript // 设置值 localStorage.setItem('name', 'kunkun') // 获取值 let username = localStorage.getItem('name') console.log(username) // 删除值 localStorage.removeItem('name') // 清空所有值 localStorage.clear() ``` ### Session Storage `Session Storage` 的特性大多与 `Local Storage` 相同，唯一不同的是浏览器关闭后 `Session Storage` 里的数据将被自动清空，因此Electron应用在需要保存程序运行期的临时数据时常常会用到它。 ```typescript // 设置值 sessionStorage.setItem('nikname', 'ikun') // 获取值 let nickname = sessionStorage.getItem('nikname') console.log(username) // 删除值 sessionStorage.removeItem('nikname') // 清空所有值 sessionStorage.clear() ``` ### IndexedDB `IndexedDB`是一个基于 `JavaScript` 的面向对象的数据库，开发者可以用它存储大量的数据，在 `Electron` 应用内它的存储容量限制与用户的磁盘容量有关。`IndexedDB` 也只能被客户端脚本访问，不随浏览器请求被发送到服务端，服务端也无权利访问 `IndexedDB` 内的数据，它存储的数据亦无过期时间。`IndexedDB` 是非关系型数据库，不支持 `sql` 查询语句。 #### 基本使用 ```typescript let db: IDBDatabase // 打开数据库，指定数据库名称和版本号，版本号为整数，若指定的数据库不存在，就会新建数据库 const request: IDBOpenDBRequest = indexedDB.open('database', 1) // 第一次打开数据库，或者数据版本发送变化时触发 // 第一次打开数据库，会先触发 onupgradeneeded ，然后触发 onsuccess request.onupgradeneeded = (event: any) => { console.log('新建数据库，或者版本升级时触发', event) db = event.target.result let objectStore: IDBObjectStore // 判断数据库中是否存在名为 user 的对象存储 if (!db.objectStoreNames.contains('user')) { // 创建对象存储对象 user，设置主键自增 objectStore = db.createObjectStore('user', { autoIncrement: true }) // 指定主键为 id，第一条记录的 id 为 1 // objectStore = db.createObjectStore('user', { keyPath: 'id' }) // 创建索引，索引名为 name，设置唯一索引 // objectStore.createIndex 的三个参数分别为索引名称、索引所在的属性、配置对象（该属性是否可以重复） objectStore.createIndex('name', 'name', { unique: true }) } } // 数据库打开失败 request.onerror = (err) => { console.log('数据库打开失败', err) } // 数据库打开成功 request.onsuccess = (event: any) => { console.log('数据库打开成功', event) db = request.result } // 上一次数据库连接还未关闭 request.onblocked = (event) => { console.log('数据库被另一个连接打开，且阻止了当前连接继续操作') } // 3 秒后关闭数据库 setTimeout(() => { db.close() }, 3000) ``` 读写数据，`IndexedDB` 的读写操作都是异步的，通过监听请求的 `onsuccess` 和 `onerror` 事件来获取读写的结果，对数据库进行读写之前，必须创建数据库事务 ```typescript let db: IDBDatabase const request: IDBOpenDBRequest = indexedDB.open('database', 1) // 数据库打开失败 request.onerror = (err) => { console.log('数据库打开失败', err) } // 数据库打开成功 request.onsuccess = (event: any) => { console.log('数据库打开成功', event) db = request.result // 创建事务，指定数据库对象存储名称，操作模式为读写模式 const transaction = db.transaction(['user'], 'readwrite') // 获取对象存储 const store = transaction.objectStore('user') // 添加数据 addUser({ username: 'kunkun', age: 18, userType: 'user', email: 'kunkun@qq.com', sort: 10 }) addUser({ username: '唔西迪西', age: 20, userType: 'admin', email: 'wuxidxi@qq.com', sort: 12 }) addUser({ username: '玛卡巴卡', age: 25, userType: 'user', email: 'makabaka@qq.com', sort: 14 }) getDataByKey('ikun') // 删除数据 delUser('ikun') // 清空所有数据 clearUser() // 更新数据 updateUser(1, { username: '坤坤', age: 18, userType: 'admin', email: 'kunkun@qq.com', sort: 10 }) // 根据索引查询数据 getUserByKey(1) getUserByIndex('username', 'kunkun') // 获取全部数据 getUserList() } // 第一次打开数据库，或者数据版本发送变化时触发 // 第一次打开数据库，会先触发 onupgradeneeded ，然后触发 onsuccess request.onupgradeneeded = (event: any) => { console.log('新建数据库，或者版本升级时触发', event) let db: IDBDatabase = event.target.result let objectStore: IDBObjectStore // 判断数据库中是否存在名为 user 的对象存储 if (!db.objectStoreNames.contains('user')) { // 创建对象存储对象 user，设置主键自增 objectStore = db.createObjectStore('user', { autoIncrement: true }) // 指定主键为 id，第一条记录的 id 为 1 // objectStore = db.createObjectStore('user', { keyPath: 'id' }) // 创建索引，索引名为 username，设置唯一索引 // objectStore.createIndex 的三个参数分别为索引名称、索引所在的属性、配置对象（该属性是否可以重复） objectStore.createIndex('username', 'username', { unique: true }) } } // 添加数据 function addUser(value: any, key?: IDBValidKey) { const transaction = db.transaction(['user'], 'readwrite') const store = transaction.objectStore('user') const request = store.add(value, key) request.onsuccess = (event) => { console.log('添加数据成功', event) } request.onerror = (err) => { console.log('添加数据失败', err) } } // 根据索引删除数据 function delUser(key: IDBValidKey | IDBKeyRange) { const transaction = db.transaction(['user'], 'readwrite') const store = transaction.objectStore('user') const request = store.delete(key) request.onsuccess = (event) => { console.log(`根据索引${key}删除数据成功`, event) } request.onerror = (err) => { console.log(`根据索引${key}删除数据失败`, err) } } // 清空数据所有数据 function clearUser() { const transaction = db.transaction(['user'], 'readwrite') const store = transaction.objectStore('user') const request = store.clear() request.onsuccess = (event) => { console.log('清空数据成功', event) } request.onerror = (err) => { console.log('清空数据失败', err) } } // 修改数据 - value 会被整体替换掉 function updateUser(key: IDBValidKey, value: any) { const transaction = db.transaction(['user'], 'readwrite') const store = transaction.objectStore('user') const request = store.put(value, key) request.onsuccess = (event) => { console.log(`根据索引${key}更新数据成功`, event) } request.onerror = (err) => { console.log(`根据索引${key}更新数据失败`, err) } } // 根据索引查询数据 function getUserByKey(key: IDBValidKey | IDBKeyRange) { const transaction = db.transaction(['user'], 'readwrite') const store = transaction.objectStore('user') const request = store.get(key) request.onsuccess = (event) => { console.log(`根据索引${key}获取数据成功`, (event.target as any).result) } request.onerror = (err) => { console.log(`根据索引${key}获取数据失败`, err) } } // 根据索引查询数据，自定义索引 function getUserByIndex(name: string, key: IDBValidKey | IDBKeyRange) { const transaction = db.transaction(['user'], 'readwrite') const store = transaction.objectStore('user') const index = store.index(name) const request = index.get(key) request.onsuccess = (event) => { console.log(`根据索引${key}获取数据成功`, (event.target as any).result) } request.onerror = (err) => { console.log(`根据索引${key}获取数据失败`, err) } } // 获取全部数据 function getUserList() { const transaction = db.transaction(['user'], 'readwrite') const store = transaction.objectStore('user') const request = store.getAll() request.onsuccess = (event) => { console.log('获取全部数据成功', (event.target as any).result) } request.onerror = (err) => { console.log('获取全部数据失败', err) } } ``` #### 使用Dexie `Dexie.js` 是一个对浏览器 `indexedDb` 的包装库，能够让开发者操作 `indexedDb` 变得更加简单和有趣官网：安装依赖 ```typescript pnpm i dexie ``` 基本使用 ```typescript import Dexie, { type EntityTable } from 'dexie' interface User { id: number username: string age: number userType: string email: string sort: number } const db = new Dexie('database') as Dexie & { // id 是主键 user: EntityTable } db.version(1).stores({ // 设置主键为 id 自增 user: '++id' }) // 添加数据 async function addUser(user: Omit) { await db.user.add(user) } addUser({ username: 'kunkun', age: 18, userType: 'user', email: 'ikun@qq.com', sort: 10 }) addUser({ username: '唔西迪西', age: 20, userType: 'admin', email: 'wuxidxi@qq.com', sort: 12 }) // 删除数据 async function delUser(id: number) { await db.user.delete(id) } delUser(2) // 清空数据 async function clearUser() { await db.user.clear() } clearUser() // 修改数据 async function updateUser(id: number, user: Partial>) { await db.user.update(id, user) } updateUser(1, { username: '坤坤', userType: 'admin' }) // 根据 id 获取用户数据 async function getUser(id: number) { return await db.user.get(id) } getUser(1) // 获取所有数据 async function getUserList() { return await db.user.toArray() } // 删除数据库 async function delDB() { db.close() await db.delete() } delDB() ``` ### Web SQL `WebSQL` 是一种为浏览器提供的数据库技术，它最大的特点就是使用 `SQL` 指令来操作数据。已废弃，了解即可。 ### Cookie `Cookie` 用于存储少量的数据，最多不能超过 `4KB`，用来服务于客户端和服务端间的数据传输，一般情况下浏览器发起的每次请求都会携带同域下的 `Cookie` 数据，大多数时候服务端程序和客户端脚本都有访问`Cookie` 的权力。开发者可以设置数据保存的有效期，当 `Cookie` 数据超过有效期后将被浏览器自动删除。 ```typescript // 获取 cookie let cookie = document.cookie // 设置 cookie document.cookie = 'name=kunkun' document.cookie = 'age=18' console.log(cookie) // name=kunkun; age=18 // 删除 cookie document.cookie = 'age=18; expires=' + new Date(0).toUTCString() ```