Как да съхранявате потребителски данни в Electron

3-те най-често срещани начина за запазване на потребителските данни с пример

Код в тази статия можете да намерите тук: https://github.com/ccnokes/electron-tutorials

Повечето приложения на Electron се нуждаят от някакъв начин за запазване на потребителските данни. Това могат да бъдат предпочитания на потребителя (например показване / не показване на известия) или някакъв вид данни за приложението (например размер и позиция на последния прозорец). И така, как да запазваме потребителските настройки в приложението Electron? И къде да ги запишем?

Тъй като имаме достъп както до браузъра, така и до API на node.js, имаме някои опции за запазване на потребителските данни. Нека преминем над тях и тогава ще разгледаме практически пример.

API за съхранение на HTML5 (localStorage и IndexedDB)

Ако имате достъп преди всичко до данните си в процеса на рендериране, това е най-простото решение. Можете да получите достъп до данните за съхранение на HTML5 от основния процес чрез електронно дистанционно, което предоставя асинхронен API за скрит прозорец на браузъра, който може да изпълни DOM / рендериращ специфичен код. Един недостатък на това може да е фактът, че API, който използвате, за да получите / зададете вашите потребителски данни в main (async), ще бъде различен от този, който е в рендерера (синхронизацията). Това е доста атрактивно решение и с което планирам да си поиграя.

Плосък файл

Ако искаме да получим достъп до тези данни лесно и от рендеринга, и от основния, използвайки един и същ API, можем да използваме модула node.js fs (файлова система), за да запишем данни във файл JSON (или във всеки формат, който желаем). Този подход обхваща най-често срещаните случаи на употреба, така че ще разгледаме как да направите това в пример за момент.

Вградена база данни

Ако имаме по-големи нужди за съхранение на данни, има „вградени“ бази данни като neDB (реализира API на Mongo) или sqlite, които бихме могли да използваме. Обърнете внимание, че това би могло да внесе известна сложност, защото понякога тези бази данни (като sqlite) са собствени модули на възлите (те използват C ++) и кодирането на нативния код на междуплатформен плат, дори и чрез NPM, може да има някои gotchas. Повечето приложения, за които съм виждал / чувал, нямат толкова сложни нужди за съхранение, но съм сигурен, че има някои случаи на използване за това.

Къде трябва да съхранявам данните?

Обикновено данните се съхраняват в папката на „app data“ на потребителя.
Където тази директория е различна в зависимост от операционната система.
Mac OS: ~ / Библиотека / Поддръжка на приложения / <Вашето име на приложение (взето от свойството име в package.json)>
Windows: C: \ Потребители \ \ AppData \ Local \ <Вашето име на приложението>
Linux: ~ / .config / <Вашето име на приложението>

Electron предоставя app.getPath, който връща правилната директория, в зависимост от вашата платформа.

Защо да не съхраняваме потребителските данни по-близо до изходните файлове на нашето приложение?

Съхраняването на потребителски данни в определеното място на операционната система за данните на приложението на потребителя е идиоматичният начин за запазване на потребителските данни на родното приложение, защото:

  • когато автоматично актуализираме приложението, изходните ни файлове могат да бъдат преместени или изтрити
  • промяната или добавянето към вътрешните файлове на приложението ще обезсили подписа на кода

Нека да запазим някои данни (пример)

Мисля, че най-често срещаните случаи на използване са обхванати от съхраняването на нашите данни като JSON в указателя на потребителските данни. Нека да видим как бихме могли да внедрим модул в нашето приложение, който да се справи със запазването / зареждането на размера на прозореца. Когато променим размера на прозореца, ще запишем новия размер във файл. Когато приложението се стартира, ще заредим този файл и ще предадем в запазения размер на нашия екземпляр на BrowserWindow.

Нека да капсулираме логиката за получаване и настройка на данни в клас, наречен Store. Основните неща, които този клас трябва да направи, са да прочетат / запишат във файл и да получат / зададат стойности. Също така ще го направим така, че да може да работи или в рендера, или в основния процес. Когато запазва файла, трябва да го запише в директорията с данни на потребителя. Ще го направим, така че нашият клас приема обект с опции като първи аргумент. Ще предадем името на файла с данни и някои по подразбиране в опциите.

Добре, това е всичко. Доста проста. Сега нека го интегрираме в нашето приложение.

Готово. Сега да стартираме нашето приложение и да го тестваме.

Преоразмеряването на прозореца ще доведе до запис на файла. Трябва да изглежда нещо като:

{
  "windowBounds": {
    "ширина": 427,
    "височина": 289
  }
}

Класът ни в магазина всъщност е съвместим с модул на общността, наречен electron-config (да, ние реализирахме същия API) и това е страхотен модул с повече функции и покритие на теста.

Запазването на позицията и размера на прозореца е често срещана употреба в приложенията на Electron. Друг удобен модул на общността, който се справя с това, е състояние на електронни прозорци.

Имате го!

За пълен видео курс за това как да създадете приложение за Electron ...

От създаването на първия ви браузър до разполагането на приложението ви - вижте курса ми в Egghead.io!