客户端开发（Electron）数据存储

「这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」。

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

---

     Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

前言：

    数据存储在应用开发中也是必不可少的一块功能，在Electron开发中支持将数据持久化到本地文件中，浏览器提供的介质和SQLite数据库中，SQLite作为一款轻量级的关系数据存储在移动端开发中也广泛应用。

本地文件存储：

存储目录：

• 因为不通的系统的文件目录不统一，Electron提供了专有的API来方便我们获取目录（app.getPath("userData");）
• 常见的用户目录：
  • desktop、documents、downloads、pictures、music、video
• 特殊的文件目录：
  • temp对应系统临时文件夹路径。
  • ·exe对应当前执行程序的路径。
  • ·appData对应应用程序用户个性化数据的目录。
  • userData是appData路径后再加上应用名的路径，是appData的子路径。这里说的应用名是开发者在package.json中定义的name属性的值。
• 系统默认目录：
  • 当前用户的主目录：require('os').homedir(); / C:\Users\<username>
  • 默认临时文件目录：require('os').homedir(); / C:\Users\<username>\AppData\Local\Temp

文件读写操作：

• 确定文件目录：

  const dataPath = path.join(app.getPath('userData'), 'data.json')

• 文件写入：

  fs.writeFileSync(
      dataPath,
      JSON.stringify({ username: "admin", version: "0.0.1" }),
      { encoding: "utf-8" }
  );

• 文件读取：

  const content = fs.readFileSync(dataPath, { encoding: "utf-8" });
  console.log("[ content ] >", content);

第三方库使用：

• lowdb： github.com/typicode/lo…，简单方便地使用本地JSON数据库的扩展。
• electron-store： github.com/sindresorhu…，专门为Electron设计的存取用户配置，应用状态，缓存的扩展。(github.com/sindresorhu…)

SQLite数据存储：

• 安装node-sqlite3扩展：

  npm install sqlite3 --build-from-source --runtime=electron --target=13.6.9 --dist-url=https://atom.io/download/electron

• 安装knexjs扩展：

  npm install knex --save

• 《因sqlite未安装成功，调试后补充》这个地方真是一路坑，有没有踩过坑的留个地址😭

总结：

    以上就是在Electron开发关于数据的存储方式，不同的数据适用于不同的方式存储，在实际开发中可灵活运用，浏览器储存的方式就不再进行介绍了。

---

欢迎关注我的公众号“前端小鑫同学”，原创技术文章第一时间推送。