当前位置：首页 > news >正文

electron 开发轻量级本地数据存储桌面端应用（简洁版）

news 2026/3/27 2:18:15

背景

接了一个项目需要开发一个功能简单的桌面端应用，主要包含的功能有内置数据，本地化操作数据，对数据进行CRUD操作。
效果展示如下：

技术选型：

开发桌面端有如下几种技术方案：**

Electron：使用HTML、CSS和JS构建跨平台的桌面应用程序，基于Chromium和Node.js。 NW.js：（也称node-webkit）类似于Electron。 React Native：使用React和JS。 Flutter：使用Dart编程语言，可构建高度定制的桌面应用程序。 本文这里选择Electron。

“vue”: “^3.2.47”,
“vue-router”: “^4.1.6”,
“ant-design-vue”: “^4.0.0”,
“lowdb”: “^1.0.0”, //本地化存储数据插件

项目搭建

本项目使用Vue Cli 创建Vue项目,命令如下：

npm i @vue/cli -g
vue create desk
cd desk
vue add electron-builder
npm run electron:serve

运行之后效果：

项目目录如下：
和vue项目目录差不多，差异的是electron主进程的代码是放在background.js中。

项目难点：

一.Electron 实现对数据进行本地持久化存储方案选择——`lowdb`

Electron 是一个用于构建跨平台桌面应用程序的开源框架，它允许你使用前端技术（HTML、CSS 和 JavaScript）创建桌面应用程序。如果你想在 Electron 应用程序中对数据进行本地持久化存储，你可以使用以下方法：

使用 Electron 的内置 API：Electron 提供了一些内置的 API，可以让你轻松地进行本地数据持久化存储，最常见的是使用localStorage和sessionStorage，类似于在浏览器中的用法。这种方法适合于存储少量数据，例如配置信息或用户首选项。
示例：
```
// 本地存储数据localStorage.setItem('key','value');// 从本地获取数据constdata=localStorage.getItem('key');// 删除数据localStorage.removeItem('key');
```

使用 Node.js 模块：Electron 可以使用 Node.js 模块，这意味着你可以使用 Node.js 提供的文件系统和其他模块来进行更高级的本地数据持久化存储。最常见的方式是使用fs模块来读写文件。

示例：

constfs=require('fs');// 写入数据到本地文件fs.writeFile('data.txt','Hello, Electron!',(err)=>{if(err)throwerr;console.log('数据已写入文件');});// 从本地文件读取数据fs.readFile('data.txt','utf8',(err,data)=>{if(err)throwerr;console.log('从文件中读取的数据：',data);});

使用数据库：如果你需要存储大量结构化数据，你可以考虑使用一种数据库系统，如 SQLite、IndexedDB 或 LevelDB。SQLite 特别适合桌面应用程序，因为它是一个嵌入式数据库引擎，可以轻松地集成到 Electron 应用中。

示例（使用 SQLite）：

constsqlite3=require('sqlite3').verbose();constdb=newsqlite3.Database('mydatabase.db');// 创建表并插入数据db.serialize(()=>{db.run('CREATE TABLE IF NOT EXISTS users (id INT, name TEXT)');db.run('INSERT INTO users VALUES (1, "John")');});// 查询数据db.all('SELECT * FROM users',(err,rows)=>{if(err)throwerr;console.log('查询结果：',rows