Сохранение данных в ElectronJS
ElectronJS - это платформа с открытым исходным кодом, используемая для создания кроссплатформенных нативных настольных приложений с использованием веб-технологий, таких как HTML, CSS и JavaScript, которые могут работать в операционных системах Windows, macOS и Linux. Он объединяет движок Chromium и NodeJS в единую среду выполнения.
Все сложные веб-приложения используют локальное хранилище . Локальное хранилище (также известное как хранилище DOM ) - это тип веб-хранилища, которое позволяет веб-сайтам хранить, сохранять и получать доступ к этим данным в клиентском браузере без срока действия. Данные, хранящиеся в локальном хранилище, по-прежнему будут доступны даже после закрытия или перезагрузки окна браузера. Данные приложения хранятся локально в клиентском браузере. HTML5 и Vanilla JavaScript обеспечивают обширную поддержку локального хранилища через API. До внедрения локального хранилища данные сохранялись в файлах cookie, которые включались в каждый вызов HTTP REST API на сервер. Локальное веб-хранилище более безопасно, чем файлы cookie, и мы можем хранить большие объемы данных (до 5 МБ ), не влияя на производительность веб-сайта. Эти данные никогда не передаются на сервер и остаются в браузере на стороне клиента до тех пор, пока локальное хранилище не будет очищено вручную. Локальное хранилище реализуется для каждого источника, т. Е. На основе домена и протокола веб-сайта. Все веб-страницы из одного источника имеют доступ к одним и тем же данным в локальном хранилище. Для одной и той же веб-страницы, доступ к которой осуществляется из разных протоколов, таких как HTTP или HTTPS , создается другой экземпляр локального хранилища. Любые данные, хранящиеся в локальном хранилище, когда веб-страница находится в режиме частного или инкогнито, будут очищены один раз после закрытия всех вкладок в режиме инкогнито. Локальное хранилище не следует путать с хранилищем сеансов, в котором данные сохраняются до завершения сеанса страницы. После завершения сеанса данные стираются. Все современные браузеры поддерживают локальное хранилище, включая Chromium.
Несмотря на то, что Chromium поддерживает локальное хранилище, Electron не предоставляет нам встроенный способ хранения и сохранения пользовательских настроек и других данных в локальном хранилище. Однако с помощью внешних пакетов npm мы можем сохранять данные в приложении Electron и получать к ним доступ просто и эффективно. В этом руководстве мы реализуем локальное хранилище в Electron с помощью пакета npm electronic-settings. Для получения более подробной информации перейдите по ссылке: https://www.npmjs.com/package/electron-settings . Этот пакет был принят и используется самим Electron в демонстрационных целях. Мы предполагаем, что вы знакомы с предварительными условиями, описанными в вышеупомянутой ссылке. Для работы Electron в системе должны быть предварительно установлены node и npm.
- Структура проекта:
Пример: следуйте инструкциям, приведенным в разделе «Динамическое оформление в ElectronJS», чтобы настроить базовое приложение «Электрон». Скопируйте код Boilerplate для файлов main.js и index.html, как указано в статье. Мы продолжим создавать наше приложение, используя ту же кодовую базу. Кроме того, установите пакет электронных настроек с помощью npm. Согласно официальной документации, этот пакет представляет собой простую и надежную библиотеку управления настройками приложений Electron. Этот пакет позволяет нам сохранять пользовательские данные и настройки в приложении между перезагрузками и запусками приложения, как в локальном хранилище. Все данные, сохраняемые с помощью этого пакета, хранятся в файле JSON под именем settings.json, расположенном в каталоге локального системного приложения пользователя. Обратитесь к коду для лучшего понимания.
npm install electronic-settings --save
Кроме того, внесите необходимые изменения, упомянутые в файле package.json, чтобы запустить приложение Electron. Мы продолжим создавать наше приложение, используя ту же кодовую базу. Основные шаги, необходимые для настройки приложения Electron, остаются прежними.
package.json:
{
"имя": "электрон-настойчиво",
"версия": "1.0.0",
"description": "Сохранять данные в электронном",
"main": "main.js",
"scripts": {
"старт": "электрон".
},
"ключевые слова": [
"электрон"
],
«автор»: «Радхеш Ханна»,
"лицензия": "ISC",
"dependencies": {
"электрон": "^ 8.3.0",
"электрон-настройки": "^ 4.0.2"
}
}
Выход:
Сохранение данных в электронном виде: пакет npm electronic-settings можно напрямую использовать в основном процессе и процессах рендеринга приложения для доступа к хранилищу. Этот пакет разработан и работает аналогично веб-API Window.localStorage. Этот пакет совместим с Electron v8.3.0, работает без ошибок и регулярно обновляется. Теперь мы реализуем этот пакет в приложении Electron. Для получения более подробной информации об этом пакете, обновлениях версий и журналах изменений перейдите по ссылке: https://electron-settings.js.org/ .
- index.html: добавьте в этот файл следующий фрагмент.
HTML
< 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: кнопка отправки данных еще не связана с какими-либо функциями. Чтобы изменить это, добавьте следующий фрагмент кода в файл 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. Затем мы сохраняем и получаем доступ к этим данным в приложении Electron, используя методы экземпляра пакета электронных настроек . Пакет npm electronic-settings поддерживает следующие методы экземпляра, которые также использовались в приведенном выше коде.
- settings.set (key, value) Этот метод экземпляра используется для сохранения данных в приложении. Данные хранятся однозначно и идентифицируются ключевым параметром. Этот метод не имеет возвращаемого типа. По умолчанию этот метод экземпляра является асинхронным . Вместо этого мы можем использовать метод settings.setSync (key, value) для работы с синхронными данными. Он принимает следующие параметры.
- key: String Этот параметр используется для однозначной идентификации сохраняемых фактических данных. Используя этот ключевой параметр, мы можем позже получить доступ к этим данным с помощью метода экземпляра settings.get ().
- value: Object Этот параметр представляет фактические данные, которые необходимо сохранить в приложении Electron. Этот параметр может содержать любой допустимый объект JSON, включая массив JSON . Затем мы можем использовать точечную аннотацию . для фильтрации и получения точных данных, требуемых от объекта JSON, в сочетании с ключевым параметром. Обратитесь к коду для лучшего понимания. Для доступа к данным из массива JSON
- settings.has (key) Этот метод экземпляра используется для проверки того, присутствуют ли данные, представленные ключевым параметром, в приложении. Затем метод Instance возвращает Promise и возвращает логическое значение, указывающее, присутствуют ли данные или нет. Возвращает истину, если Ключ существует в хранилище. По умолчанию этот метод экземпляра является асинхронным . Вместо этого мы можем использовать метод settings.hasSync (key) для работы с синхронными данными. В приведенном выше примере мы предоставили недопустимый ключевой параметр, который должен возвращать false .
- settings.get (key) Этот метод экземпляра используется для возврата данных, которые сохраняются в приложении, как однозначно идентифицированные ключевым параметром. Это тот же ключевой параметр, который был установлен в методе экземпляра settings.set (). Этот метод возвращает Promise и преобразуется в объект, содержащий фактические данные. Возвращаемый объект может быть действительным объектом JSON или просто примитивным типом данных, таким как Integer или String . В случае, если мы передаем неопределенный ключевой параметр, возвращаемый объект будет неопределенным . Мы также можем проверить, существует ли ключевой параметр, используя метод экземпляра settings.has (). По умолчанию этот метод экземпляра является асинхронным . Вместо этого мы можем использовать метод settings.getSync (key) для работы с синхронными данными. Этот пакет использует скрытый метод Lodash get () для выполнения этой операции. Lodash - это служебная библиотека JavaScript, используемая для общих задач программирования.
- settings.file () Этот метод экземпляра возвращает полный путь к файлу settings.json, который был создан и используется для сохранения данных в приложении. Как упоминалось выше, по умолчанию этот файл хранится в каталоге пользовательских данных приложения собственной системы. Не рекомендуется менять расположение файла settings.json. Этот метод экземпляра возвращает значение String, представляющее полный путь к файлу settings.json.
- settings.reset () Этот метод экземпляра используется для сброса всех конфигураций пакета электронных настроек по умолчанию. Этот метод экземпляра не имеет возвращаемого типа. Этот метод не сбрасывает данные, хранящиеся в файле settings.json, а только сбрасывает конфигурации этого пакета.
- settings.unset (key) Этот метод экземпляра используется для очистки данных, хранящихся в приложении, с помощью метода экземпляра settings.set (). Этот метод сбрасывает данные на основе предоставленного ключевого параметра, который однозначно идентифицирует данные. Этот метод экземпляра возвращает обещание, и оно разрешается, когда данные, идентифицированные ключевым параметром / всеми данными, были успешно сброшены. По умолчанию этот метод экземпляра является асинхронным . Вместо этого мы можем использовать метод settings.unsetSync (key) для работы с синхронными данными.
Примечание . Ключевой параметр - это необязательный параметр. Если ключевой параметр не передан, он сбросит все данные, сохраненные в приложении, с помощью пакета электронных настроек.
Вывод: на этом этапе после запуска приложения Electron мы должны иметь возможность сохранять данные, введенные пользователем в приложении, и успешно извлекать их при перезагрузке или перезапуске приложения.