Rozhraní API webového úložiště HTML poskytuje způsob, jak ukládat data lokálně v prohlížeči uživatele. Můžete jej použít k bezpečnému místnímu uložení velkého množství dat, aniž by to ovlivnilo výkon webu.
Na rozdíl od souborů cookie má webové úložiště výrazně vyšší limit úložiště (5 MB oproti 4 kB) a uložená data se nikdy neodesílají na server při každém požadavku. Server proto nemůže manipulovat s daty webového úložiště prostřednictvím HTTP cookies.
Úložiště je také vázáno na původ (podle domény, protokolu a portu). Všechny webové stránky z jednoho zdroje (se stejným protokolem, doménou a portem) mohou ukládat a přistupovat ke stejným datům. I když změníte protokol z http do https , nemáte přístup k datům uloženým pomocí http protokol.
Objekty webového úložiště
Webové úložiště HTML poskytuje dva objekty pro ukládání dat jako párů klíč–hodnota v prohlížeči:
localStorage— ukládá data bez data vypršení platnosti, které přetrvává i po zavření okna prohlížeče. Data musíte explicitně odstranit buď programově, nebo vymazáním dat prohlížeče. Data jsou sdílena mezi všemi relacemi stejného původu.sessionStorage— ukládá data po dobu trvání relace stránky, která se automaticky vymažou při zavření karty prohlížeče. Pokud otevřete více karet stejného webu, budou mít různé relace a nebudou mít přístup k údajům o sobě navzájem.
Od localStorage uchovává data bez data vypršení platnosti, je užitečný pro ukládání informací, jako jsou položky nákupního košíku, uživatelské preference (měna, tmavé nebo světlé barevné schéma), produkty uložené v záložkách nebo dokonce zapamatování si, že je uživatel přihlášen na webu.
Metody a vlastnosti
Oba localStorage a sessionStorage objekty poskytují stejné metody a vlastnosti, protože vracejí stejný objekt Storage.
Storage objekt má pouze jednu vlastnost, length , která vrací počet položek v něm uložených.
Zde je seznam metod, které můžete volat k manipulaci s daty webového úložiště:
| Metoda | Popis |
|---|---|
setItem(key, value) | Přidejte do úložiště nový pár klíč–hodnota |
getItem(key) | Načíst hodnotu podle jejího klíče |
removeItem(key) | Odstranění položky pomocí jejího klíče |
clear() | Smazat všechny páry klíč–hodnota |
key(n) | Získejte název n-tého klíče v úložišti |
Příklady webového úložiště
Pojďme si hrát s localStorage abyste získali představu o tom, jak webové úložiště funguje.
Ukládání dat
Následující příklad používá setItem() přidat nové páry klíč–hodnota do localStorage :
localStorage.setItem('id', 'ATS-456');
localStorage.setItem('email', '[email protected]');
Všimněte si, že klíč i hodnota byly předány setItem() musí být struny. Pokud předáte jakoukoli hodnotu, která není řetězec, například objekt nebo číslo, setItem() metoda jej automaticky převede na řetězec:
localStorage.setItem('visitors', 34); // stored as '34'
localStorage.setItem('user', { name: 'Alex' }); // stored as '[oject Object]'
U objektů musíte před uložením do webového úložiště použít metodu JSON.stringify() k převodu na řetězec:
const str = JSON.stringify({name: 'Alex'});
localStorage.setItem('user', str);
Načítání dat
Chcete-li získat uložená data v localStorage pomocí klíče, použijte getItem() metoda:
localStorage.getItem('id'); // ATS-456
localStorage.getItem('email'); // [email protected]
Případně můžete také použít tečku (. ) dar pro přístupové klíče od localStorage jako objekty:
localStorage.visitors; // 45
Pokud klíč neexistuje, null hodnota je vrácena getItem() :
localStorage.getItem('name'); // null
Odebrání dat
Chcete-li odstranit pár klíč–hodnota z localStorage , stačí předat název klíče do removeItem() metoda:
localStorage.removeItem('id');
Případně můžete také použít delete operátor k odstranění klíče jako objektu:
delete localStorage.email;
Chcete-li odstranit všechny páry klíč–hodnota, použijte clear() metoda místo toho:
localStorage.clear();
Iterace přes klávesy
Iterovat přes všechny klíče uložené v localStorage , můžeme použít cyklus for...of:
const keys = Object.keys(localStorage);
for (let key of keys) {
console.log(`${key}: ${localStorage.getItem(key)}`);
}
Object.keys() metoda vrací všechny vlastní vlastnosti localStorage objekt, ignorující prototyp.
Shrnutí
Webové rozhraní API pro ukládání HTML poskytuje mechanismus pro místní ukládání dat v prohlížeči uživatele. Před ukládáním na web byly soubory cookie jedinou dostupnou možností pro ukládání dat aplikací.
Na rozdíl od cookies je webové úložiště bezpečnější a dokáže uložit větší množství dat (5 MB+, v závislosti na prohlížeči), aniž by to ovlivnilo výkon aplikace.
Webové úložiště je vázáno na zdroj, což znamená, že stránky ze stejného zdroje mohou přistupovat pouze ke svým vlastním datům.
Webové úložiště poskytuje dva objekty, localStorage a sessionStorage , chcete-li uložit data jako páry klíč–hodnota v prohlížeči.
Data uložená v localStorage je trvalé a sdílené mezi všemi kartami a okny se stejným původem. Přetrvává i po zavření prohlížeče nebo restartování počítače.
sessionStorage objekt dočasně ukládá data, dokud není relace aktivní. Data jsou přístupná pouze na stejné kartě a nelze k nim přistupovat z jiných karet. Po zavření karty prohlížeče se automaticky vymaže.