Rychlý tip:Udělejte z IndexedDB hračku s LocalForage

IndexedDB je lokální databáze NoSQL, která umožňuje vývojářům bezpečně ukládat data v prohlížeči. Má skvělou podporu napříč platformami, pracuje s jakýmkoli typem dat a je dostatečně výkonný pro vytváření aplikací, které fungují offline.

Ačkoli je to pravděpodobně nejlepší řešení pro úložiště na straně klienta, IndexedDB má jednu kritickou chybu - je to nízkoúrovňové API. Věci jako transakce, kurzory a nedostatek podpory pro sliby příliš komplikují IndexedDB a práce s nimi je vyčerpávající.

Naštěstí existuje způsob, který je pro vývojáře přívětivější!

LocalForage to the Rescue

LocalForage je open-source JavaScriptová knihovna, díky které je práce s databázemi v prohlížeči mnohem příjemnější. Navenek jeho API vypadá velmi podobně jako localStorage, zatímco pod kapotou skrývá celý arzenál funkcí IndexedDB.

Ve srovnání s 15 řádky kódu potřebnými k tomu, aby bylo možné s IndexedDB dělat cokoli, s localForage je vytváření databáze a přístup k jejím záznamům omezeno na použití jednoduché metody. Přidává také tolik potřebnou podporu pro sliby a další užitečné nástroje.

Instalace

Přidání localForage do projektu je poměrně jednoduché. Buď jej vložte přímo do HTML:

<script src="assets/js/localforage.min.js"></script>

Nebo nainstalujte pomocí správce balíčků podle vašeho výběru:

npm install localForage --save

Knihovna je přívětivá pro prohlížeč a lze ji použít s balíky, jako je Webpack. Rozhraní localForage nevyžaduje žádnou další inicializaci ani načítání, takže jej můžeme používat, jakmile bude k dispozici.

import localforage from "localforage";
localforage.setItem('key', 'value');

Psaní do obchodu

Protože nemusíme nastavovat nebo vytvářet nové databáze, můžeme jít přímo dovnitř a přidat některá data do našeho obchodu. To se provádí pomocí setItem metodou, přičemž dva parametry - klíč a hodnota .

  • klíč – Jedinečný identifikátor rozlišující velká a malá písmena, který bude použit, kdykoli budeme chtít později přistupovat k dané položce. Pomocí setItem znovu na stejném klíči jej přepíše.
  • hodnota – Data, která chceme uložit. Může to být jakýkoli platný řetězec, číslo, objekt, pole nebo soubor blob.

Proces je asynchronní, takže pokud chceme s daty udělat něco jiného a ošetřit chyby, musíme použít příslib nebo zpětné volání.

var hexColors = {
    red: 'ff0000',
    green: '00ff00',
    yellow: 'ffff00'
};

localforage.setItem('colors', hexColors).then(function (value) {
    console.log(value.red);
}).catch(function(err) {
    console.error(err);
});

Čtení z obchodu

Načítání položek z databáze funguje v podstatě stejným způsobem. Jednoduše použijeme getItem , předejte název klíče a použijte příslib práce s daty.

localforage.getItem('colors').then(function (value) {
    console.log(value.red); 
}).catch(function(err) {
    console.error(err);
});

Pokud se pokusíme získat klíč, který neexistuje, příslib bude úspěšně vyřešen, ale hodnota uvnitř bude null .

Další metody

LocalForage má některé další užitečné metody pro práci s databází. Všechny se používají stejně snadno jako setItem a getItem , také podporuje sliby nebo zpětná volání.

  • removeItem(key) – Odebere pár klíč/hodnota z obchodu.
  • keys() - Vrátí pole názvů všech klíčů (pouze názvy).
  • iterate(callback) – Funguje jako forEach, očekává funkci zpětného volání a projde všechny páry klíč/hodnota.
  • length() – Vrátí počet položek v obchodě.
  • clear() - Vymaže obchod.

Více databází

Příklady v tomto článku dosud používaly localforage přímé rozhraní vedoucí k jedinému globálnímu obchodu. Pokud potřebujeme více než jeden obchod, můžeme pomocí createInstance vytvořit tolik instancí, kolik chceme :

var dogStore = localforage.createInstance({
  name: "Dogs"
});

var catStore = localforage.createInstance({
  name: "Cats"
});

Každý obchod je zcela nezávislý a má přístup pouze ke svým vlastním datům (databáze NoSQL jsou většinou nerelační).

dogStore.setItem('Jake', 'Good boy');
catStore.getItem('Jake').then(function (value) {
    console.log(value);  // Will result in null
});

Závěr

Pokud hledáte jednoduchý způsob správy databází na straně klienta, localForage je jedním z nejlepších dostupných nástrojů právě teď. Jeho rozhraní API poskytuje všechny potřebné nástroje a poskytuje vám dostatek volnosti k uspořádání úložiště, jak uznáte za vhodné.

  • Oficiální dokumenty – Dokumentace projektu není příliš podrobná, ale pokrývá většinu toho, co potřebujete vědět.
  • localForage na GitHubu – Úložiště je velmi aktivní, pokud máte nějaké problémy s knihovnou, nezapomeňte nejprve zkontrolovat problémy zde.
  • angular-localForage – Plugin pro práci s localForage v Angular.