Datos persistentes en ElectronJS

ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows, macOS y Linux. Combina el motor Chromium y NodeJS en un solo tiempo de ejecución.

Todas las aplicaciones web complejas hacen uso del almacenamiento local . El almacenamiento local (también conocido como almacenamiento DOM ) es un tipo de almacenamiento web que permite que los sitios web almacenen, persistan y accedan a estos datos dentro del navegador del lado del cliente sin fecha de vencimiento. Los datos persistentes en el almacenamiento local seguirán siendo accesibles incluso después de que se cierre o se vuelva a cargar la ventana del navegador. Los datos de la aplicación se almacenan localmente en el navegador del lado del cliente. HTML5 y Vanilla JavaScript brindan un amplio soporte para el almacenamiento locala través de las API. Antes de que se implementara el almacenamiento local, los datos solían almacenarse en cookies que se incluían en cada llamada de API REST de HTTP al servidor. El almacenamiento web local es más seguro que las cookies y podemos almacenar grandes cantidades de datos (hasta 5 MB ) sin afectar el rendimiento del sitio web. Estos datos nunca se transfieren al servidor y permanecerán en el navegador del lado del cliente hasta que el almacenamiento local no se borre manualmente. El almacenamiento local se implementa por origen , es decir, en función del dominio y el protocolo del sitio web. Todas las páginas web del mismo origen tienen acceso a los mismos datos dentro del almacenamiento local. Se accede a la misma página web desde diferentes protocolos, como HTTP o HTTPStiene una instancia de almacenamiento local diferente creada para ellos. Todos los datos almacenados en el almacenamiento local cuando la página web está en modo privado o de incógnito se borrarán una vez que se cierren todas las pestañas de incógnito . El almacenamiento local no debe confundirse con el Almacenamiento de sesión en el que los datos se conservan hasta que finaliza la sesión de la página. Una vez finalizada la sesión, los datos se borran. Todos los navegadores modernos admiten almacenamiento local, incluido Chromium. 

Aunque Chromium es compatible con el almacenamiento local, Electron no nos brinda una forma integrada de almacenar y conservar la configuración del usuario y otros datos dentro del almacenamiento local. Sin embargo, con la ayuda de paquetes npm externos , podemos persistir y acceder a los datos dentro de una aplicación Electron de manera simple y eficiente. En este tutorial, implementaremos el almacenamiento local en Electron mediante el uso del paquete npm de configuración de electrones. Para obtener información más detallada, consulte el enlace: https://www.npmjs.com/package/electron-settings . Este paquete ha sido adoptado y es utilizado por Electron para fines de demostración. Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron funcione, Node y npmnecesita estar preinstalado en el sistema.

• Estructura del proyecto: 

Ejemplo: Siga los pasos dados en Estilo dinámico en ElectronJS para configurar la aplicación electrónica básica. Copie el código estándar para el archivo main.js y el archivo index.html como se indica en el artículo. Continuaremos construyendo nuestra aplicación usando la misma base de código. Además, instale el paquete de configuración de electrones usando npm . Según la documentación oficial, este paquete es una biblioteca de administración de configuraciones simple y robusta para aplicaciones Electron. Este paquete nos permite conservar los datos y la configuración del usuario dentro de la aplicación entre las recargas y los inicios de la aplicación, al igual que el almacenamiento local. Todos los datos persistentes usando este paquete se almacenan en un JSONarchivo con el nombre de settings.json ubicado en el directorio de la aplicación del sistema local del usuario. Consulte el código para una mejor comprensión. 

npm install electron-settings --save

Además, realice los cambios necesarios mencionados para el archivo package.json para iniciar la aplicación Electron. Continuaremos construyendo nuestra aplicación usando la misma base de código. Los pasos básicos necesarios para configurar la aplicación Electron siguen siendo los mismos. 
paquete.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"
  }
}

Producción: 

Datos persistentes en electrones: el paquete npm de configuración de electrones se puede usar directamente en el proceso principal y los procesos de procesamiento de la aplicación para acceder al almacenamiento. Este paquete está diseñado y funciona de manera similar a la API web Window.localStorage . Este paquete es compatible y funciona sin errores a partir de Electron v8.3.0 y se actualiza periódicamente. Ahora implementaremos este paquete en la aplicación Electron. Para obtener información más detallada sobre este paquete, actualizaciones de versión y registros de cambios, consulte el enlace: https://electron-settings.js.org/ .

• index.html: agregue el siguiente fragmento en ese archivo. 

<h3>Persist Data and User Settings in Electron</h3>
  <h5>Enter Sample Text here</h5>
  <input type="text" id="sample">
  <button id="submit">
       Submitting the Data
   </button>

• index.js: Enviar el botón Datos aún no tiene ninguna funcionalidad asociada. Para cambiar esto, agregue el siguiente fragmento de código en el archivo index.js .

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

Explicación: en la aplicación anterior, estamos ingresando datos de texto de muestra del usuario utilizando el elemento de entrada HTML DOM . Luego, persistimos y accedemos a estos datos en la aplicación Electron utilizando los métodos de Instancia del paquete de configuración de electrones . El paquete npm de configuración de electrones admite los siguientes métodos de instancia que también se han utilizado en el código anterior. 

• settings.set(clave, valor) Este método de instancia se utiliza para conservar los datos en la aplicación. Los datos se almacenan de forma única y se identifican mediante el parámetro clave . Este método no tiene un tipo de devolución. De forma predeterminada, este método de instancia es asíncrono . En su lugar, podemos usar el método settings.setSync(clave, valor) para la operación de datos sincrónicos . Toma los siguientes parámetros.
  • clave: string Este parámetro se utiliza para identificar de forma única los datos reales que se almacenan. Usando este parámetro clave , más tarde podemos acceder a estos datos usando el método de instancia settings.get() .
  • valor: Objeto Este parámetro representa los datos reales que deben persistir dentro de la aplicación Electron. Este parámetro puede contener cualquier objeto JSON válido , incluida una array JSON . Entonces podemos usar la anotación de punto . para filtrar y obtener los datos exactos requeridos del objeto JSON en combinación con el parámetro clave . Consulte el código para una mejor comprensión. Para acceder a los datos desde dentro de JSON Array
• settings.has(key) Este método de instancia se utiliza para verificar si los datos representados por el parámetro clave están presentes o no dentro de la aplicación. Luego, el método Instancia devuelve una Promesa y devuelve un valor booleano que indica si los datos están presentes o no. Devuelve verdadero si la clave existe en el almacenamiento. De forma predeterminada, este método de instancia es asíncrono . En su lugar, podemos usar el método settings.hasSync(key) para la operación de datos sincrónicos . En el ejemplo anterior, proporcionamos un parámetro clave no válido que debería devolver false .
• settings.get(key) Este método de instancia se utiliza para devolver los datos que se conservan en la aplicación identificados de forma única por el parámetro clave . Este es el mismo parámetro clave que se estableció en el método de instancia settings.set() . Este método devuelve una Promesa y se resuelve en un objeto que contiene los datos reales. El objeto devuelto puede ser un objeto JSON válido o puede ser simplemente un tipo de datos primitivo, como Integer o String . En caso de que pasemos un parámetro clave indefinido , el objeto devuelto será indefinido. También podemos verificar si el parámetro clave existe usando el método de instancia settings.has() . De forma predeterminada, este método de instancia es asíncrono . En su lugar, podemos usar el método settings.getSync(key) para la operación de datos sincrónicos . Este paquete utiliza el método Lodash get() bajo el capó para realizar esta operación. Lodash es una biblioteca de utilidades de JavaScript que se utiliza para tareas de programación comunes.
• settings.file() Este método de instancia devuelve la ruta completa de settings.json que se creó y se usa para conservar los datos en la aplicación. Como se mencionó anteriormente, de forma predeterminada, este archivo se almacena en el directorio de datos de usuario de la aplicación del sistema nativo. No se recomienda cambiar la ubicación del archivo settings.json . Este método de instancia devuelve un valor de string que representa la ruta completa del archivo settings.json .
• settings.reset() Este método de instancia se utiliza para restablecer todas las configuraciones del paquete de configuración de electrones a sus valores predeterminados. Este método de Instancia no tiene un tipo de retorno. Este método no restablece los datos almacenados en el archivo settings.json , sino que solo restablece las configuraciones de este paquete.
• settings.unset(key) Este método de instancia se utiliza para borrar los datos almacenados en la aplicación utilizando el método de instancia settings.set() . Este método restablecerá los datos en función del parámetro clave proporcionado que identificará de forma única los datos. Este método de Instancia devuelve una Promesa y se resuelve cuando los datos identificados por el parámetro clave /todos los datos se han restablecido correctamente. De forma predeterminada, este método de instancia es asíncrono . En su lugar, podemos usar el método settings.unsetSync(key) para la operación de datos  sincrónicos .

Nota: El parámetro clave es un parámetro opcional . Si no se pasa el parámetro clave , se restablecerán todos los datos persistentes en la aplicación utilizando el paquete de configuración de electrones .

Salida: en este punto, al iniciar la aplicación Electron, deberíamos poder conservar los datos ingresados ​​por el usuario dentro de la aplicación y recuperarlos con éxito cuando la aplicación se vuelve a cargar o se reinicia.