在 ElectronJS 中持久化数据

ElectronJS是一个开源框架，用于使用能够在 Windows、macOS 和 Linux 操作系统上运行的 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台原生桌面应用程序。它将 Chromium 引擎和NodeJS 组合成一个单一的运行时。

所有复杂的 Web 应用程序都使用本地存储。本地存储(又名DOM 存储)是一种 Web 存储，它允许网站在客户端浏览器中存储、持久化和访问这些数据，而没有任何到期日期。即使在浏览器窗口关闭或重新加载后，本地存储中的数据仍然可以访问。应用程序数据本地存储在客户端浏览器中。 HTML5和Vanilla JavaScript通过 API为本地存储提供了广泛的支持。在实现本地存储之前，数据曾经存储在 cookie 中，cookie 包含在对服务器的每个 HTTP REST API 调用中。 Web 本地存储比 cookie 更安全，我们可以在不影响网站性能的情况下存储大量数据(最多 5 MB)。此数据永远不会传输到服务器，并将保留在客户端浏览器中，直到本地存储未被手动清除。本地存储是按来源实现的，即基于网站的域和协议。来自同一来源的所有网页都可以访问本地存储中的相同数据。从不同协议(如HTTP或HTTPS)访问的同一网页会为其创建不同的本地存储实例。当网页处于隐私或隐身模式时，任何存储在本地存储中的数据将在所有隐身选项卡关闭后清除一次。不要将本地存储与会话存储相混淆，会话存储中数据会一直保留到页面会话结束。一旦会话终止，数据将被擦除。所有现代浏览器都支持本地存储，包括 Chromium。

即使 Chromium 支持本地存储，Electron 也没有为我们提供在本地存储中存储和持久化用户设置和其他数据的内置方式。然而，在外部npm包的帮助下，我们可以简单有效地在 Electron 应用程序中持久化和访问数据。在本教程中，我们将使用电子设置npm 包在 Electron 中实现本地存储。有关更多详细信息，请参阅链接： https ://www.npmjs.com/package/electron-settings。这个包已经被采用，并且被 Electron 本身用于演示目的。我们假设您熟悉上述链接中介绍的先决条件。为了让 Electron 正常工作，需要在系统中预装node和npm。

• 项目结构：

示例：按照 ElectronJS 中的动态样式中给出的步骤设置基本的 Electron 应用程序。复制文章中提供的main.js文件和index.html文件的样板代码。我们将继续使用相同的代码库构建我们的应用程序。此外，使用 npm安装电子设置包。根据官方文档，这个包是一个简单而强大的 Electron 应用程序设置管理库。这个包允许我们在重新加载和应用程序启动之间保留应用程序中的用户数据和设置，就像本地存储一样。使用此包保存的所有数据都存储在一个名为 settings.json的 JSON文件中，该文件位于用户的本地系统应用程序目录中。请参阅代码以获得更好的理解。

npm install electron-settings --save

此外，执行 package.json文件中提到的必要更改以启动电子应用程序。我们将继续使用相同的代码库构建我们的应用程序。设置 Electron 应用程序所需的基本步骤保持不变。
包.json：

{
  "name": "electron-persist",
  "version": "1.0.0",
  "description": "Persist Data in Electron ",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0",
    "electron-settings": "^4.0.2"
  }
}

输出：

在 Electron 中持久化数据： electron-settings npm包可以直接在应用程序的 Main Process和Renderer Processes中用于访问存储。与 Window.localStorage Web API 相比，此包的设计和工作方式类似。这个包是兼容的，从Electron v8.3.0 开始没有任何错误，它会定期更新。我们现在将在 Electron 应用程序中实现这个包。有关此包、版本更新和更改日志的更多详细信息，请参阅链接： https ://electron-settings.js.org/。

• index.html：在该文件中添加以下代码段。

HTML

Persist Data and User Settings in Electron
  
Enter Sample Text here
  
  
       Submitting the Data
   

• index.js：提交数据按钮还没有任何与之相关的功能。要更改此设置，请在index.js文件中添加以下代码片段。

javascript

const electron = require('electron')
const settings = require('electron-settings');
  
console.log('File used for Persisting Data - ' + 
        settings.file());
  
var sample = document.getElementById('sample');
var submit = document.getElementById('submit');
  
settings.get('key.data').then(value => {
    console.log('Persisted Value - ' + value);
})
  
settings.has('key1.data').then(bool => {
    console.log('Checking if key1.data Exists - ' + bool)
});
  
submit.addEventListener('click', () => {
    console.log('Sample Text Entered - ' + sample.value);
    console.log('Persisting Data in electron-settings');
  
    settings.set('key', {
        data: sample.value
    });
});

说明：在上面的应用程序中，我们使用HTML DOM Input Element 从用户输入示例文本数据。然后我们使用电子设置包的实例方法在电子应用程序中持久化和访问这些数据。电子设置npm 包支持以下 Instance 方法，这些方法也已在上述代码中使用。

• settings.set(key, value)这个 Instance 方法用于在应用程序中持久化数据。数据由关键参数唯一存储和标识。此方法没有返回类型。默认情况下，此 Instance 方法是Asynchronous 。相反，我们可以使用settings.setSync(key, value)方法进行同步数据操作。它接受以下参数。
  • key: String该参数用于唯一标识正在存储的实际数据。使用此关键参数，我们可以稍后使用settings.get()实例方法访问此数据。
  • value: Object该参数表示需要在 Electron 应用程序中持久化的实际数据。此参数可以包含任何有效的 JSON对象，包括JSON Array 。然后我们可以使用点注释。结合key参数过滤和获取 JSON对象所需的确切数据。请参阅代码以获得更好的理解。从 JSON 数组中访问数据
• settings.has(key)这个 Instance 方法用于检查由key参数表示的数据是否存在于应用程序中。然后 Instance 方法返回一个Promise并返回一个布尔值，说明数据是否存在。如果 Key 存在于存储中，则返回true。默认情况下，此 Instance 方法是Asynchronous 。相反，我们可以使用settings.hasSync(key)方法进行同步数据操作。在上面的例子中，我们提供了一个无效的键参数，它应该返回false 。
• settings.get(key)此实例方法用于返回由 key参数唯一标识的应用程序中持久化的数据。这与在settings.set()实例方法中设置的关键参数相同。此方法返回一个Promise并解析为包含实际数据的对象。返回的对象可以是有效的JSON 对象，也可以只是原始数据类型，例如Integer或String 。如果我们传递一个未定义的键参数，返回的对象将是undefined 。我们还可以使用 settings.has() Instance 方法检查 key参数是否存在。默认情况下，此 Instance 方法是Asynchronous 。相反，我们可以使用settings.getSync(key)方法进行同步数据操作。这个包在底层使用了 Lodash get()方法来执行这个操作。 Lodash是一个用于常见编程任务的 JavaScript 实用程序库。
• settings.file()此实例方法返回 settings.json的完整路径，该文件已创建并用于在应用程序中持久保存数据。如上所述，默认情况下，此文件存储在本机系统的应用程序用户数据目录中。不建议更改settings.json文件的位置。此实例方法返回一个字符串值，表示settings.json文件的完整路径。
• settings.reset()这个Instance方法用于将electron-settings包的所有配置重置为默认值。此 Instance 方法没有返回类型。此方法不会重置settings.json文件中存储的数据，而只会重置此包的配置。
• settings.unset(key)这个 Instance 方法用于使用 settings.set() Instance 方法清除应用程序中存储的数据。此方法将根据提供的唯一标识数据的关键参数重置数据。这个Instance方法返回一个Promise，当key参数标识的数据/所有数据都重置成功后解析。默认情况下，此 Instance 方法是Asynchronous 。相反，我们可以使用settings.unsetSync(key)方法进行同步数据操作。

注意： key参数是一个可选参数。如果没有传递 key参数，它将使用电子设置包重置应用程序中持久存在的所有数据。

输出：此时，在启动 Electron 应用程序时，我们应该能够在应用程序中保存用户输入的数据，并在应用程序重新加载或重新启动时成功检索这些数据。