Jak ukládat uživatelská data do Electronu

Příkladem jsou 3 nejčastější způsoby, jak vytrvat uživatelská data

Kód v tomto článku naleznete zde: https://github.com/ccnokes/electron-tutorials

Většina aplikací Electron potřebuje nějaký způsob, jak uložit uživatelská data. Mohou to být preference uživatele (např. Nezobrazovat / nezobrazovat oznámení) nebo nějaký druh aplikačních dat (např. Velikost a pozice posledního okna). Jak tedy uložíme nastavení uživatele v aplikaci Electron? A kam je uložíme?

Protože máme přístup k rozhraní API prohlížeče i node.js, máme několik možností, jak zachovat uživatelská data. Podívejme se na ně a pak se podíváme na praktický příklad.

Rozhraní API úložiště HTML5 (localStorage a IndexedDB)

Pokud primárně přistupujete k datům v procesu vykreslování, jedná se o nejjednodušší řešení. K datům úložiště HTML5 můžete přistupovat z hlavního procesu pomocí elektronicky vzdáleného rozhraní, které poskytuje asynchronní rozhraní API do skrytého okna prohlížeče, které může provádět kód specifický pro DOM / renderer. Nevýhodou může být skutečnost, že API, které používáte k získání / nastavení vašich uživatelských dat v hlavním (asynchronním), se bude lišit od toho, co je ve vykreslovači (synchronizace). To je docela atraktivní řešení, s kterým si budu hrát.

Plochý soubor

Pokud chceme k těmto datům snadno přistupovat jak ze vykreslovacího, tak z hlavního, pomocí stejného API, můžeme použít modul node.js fs (souborový systém) k uložení dat do souboru JSON (nebo do jakéhokoli požadovaného formátu). Tento přístup pokrývá nejběžnější případy použití, takže si ukážeme, jak to za chvíli udělat.

Vložená databáze

Pokud máme větší požadavky na ukládání dat, můžeme použít „vestavěné“ databáze jako neDB (implementuje Mongo API) nebo sqlite. Všimněte si, že by to mohlo přinést určitou komplikovanost, protože někdy tyto databáze (jako sqlite) jsou moduly nativního uzlu (používají C ++) a přepravní nativní kód napříč platformami, dokonce i přes NPM, může mít některé gotchas. Většina aplikací, které jsem viděl / slyšel, nemá tak složité požadavky na úložiště, ale jsem si jist, že pro ně existují případy použití.

Kam mám data uložit?

Data jsou obvykle uložena ve složce „data aplikace“ uživatele.
Kde se tento adresář liší podle operačního systému.
Mac OS: ~ / Library / Application Support /
Windows: C: \ Users \ \ AppData \ Local \
Linux: ~ / .config /

Společnost Electron poskytuje aplikaci app.getPath, která v závislosti na vaší platformě vrací správný adresář.

Proč neukládat uživatelská data blíže ke všem zdrojovým souborům naší aplikace?

Ukládání uživatelských dat na určené místo v operačním systému pro data uživatelů je idiomatickým způsobem, jak nativní aplikace mohou data uživatelů přetrvávat, protože:

  • Když aplikaci automaticky aktualizujeme, naše zdrojové soubory se mohou přesunout nebo smazat
  • změna nebo přidání do interních souborů aplikace zruší platnost podpisu kódu

Vydržme některá data (příklad)

Myslím, že nejčastější případy použití jsou pokryty ukládáním našich dat jako JSON do adresáře uživatelských dat. Podívejme se, jak bychom mohli implementovat modul v naší aplikaci, který by zvládl ukládání / načítání velikosti okna. Po změně velikosti okna uložíme novou velikost do souboru. Po spuštění aplikace tento soubor načteme a uloženou velikost předáme naší instanci BrowserWindow.

Pojďme zapouzdřit získávání a nastavování logiky do třídy zvané Store. Hlavní věc, kterou musí tato třída udělat, je číst / zapisovat do souboru a získat / nastavit hodnoty. Uděláme to také proto, aby fungovalo buď ve vykreslovači, nebo v hlavním procesu. Když soubor uloží, musí soubor uložit do uživatelského adresáře dat aplikace. Uděláme to tak, aby naše třída brala jako první argument objekt voleb. Předáme název datového souboru a některá výchozí nastavení.

Dobře, to je vše. Docela jednoduché. Nyní ji integrujme do naší aplikace.

Vše hotovo. Nyní spustíme naši aplikaci a otestujeme ji.

Změna velikosti okna způsobí zapsání souboru. Mělo by to vypadat jako:

{
  "windowBounds": {
    "width": 427,
    "výška": 289
  }
}

Naše třída Store je ve skutečnosti kompatibilní s komunitním modulem s názvem electronic-config (jo, implementovali jsme stejné API) a je to skvělý modul s více funkcemi a testovacím pokrytím.

Uložení polohy a velikosti okna je běžným případem použití v aplikacích Electron. Další vhodný komunitní modul, který to zvládne, je stav elektronového okna.

Tady to máš!

Kompletní video kurz o tom, jak vytvořit aplikaci Electron…

Od vytvoření prvního BrowserWindow po nasazení aplikace - podívejte se na můj kurz na Egghead.io!