Úložiště na straně klienta je pro webové aplikace zásadní. Nemusí být tak neprůstřelné jako úložiště na straně serveru, ale bez něj by webové aplikace nebyly schopny implementovat mnoho moderních funkcí. Všechny druhy funkcí závisí na úložišti na straně klienta, od relací ve hrách po nákupní košíky na webových stránkách elektronického obchodu.

Úložiště na straně klienta také umožňuje webovým aplikacím implementovat architekturu zaměřenou na soukromí. Můžete jej použít, abyste zajistili, že citlivá data nikdy neopustí zařízení uživatele.

Co je úložiště na straně klienta?

Ve vývoji webových aplikací se úložiště na straně klienta týká různých způsobů, jak mohou webové prohlížeče ukládat data. Aplikace pak může tato data použít k poskytování funkcí uživatelům. Úložiště na straně klienta je kritické z několika důvodů:

  • Přístup k datům uloženým na klientovi je výrazně rychlejší a vaše aplikace k nim může přistupovat bez internetu.
  • Úložiště na straně klienta usnadňuje vaší aplikaci zapamatovat si preference každého uživatele.
    • instagram viewer
  • Trvalé uložení některých dat na klientovi usnadňuje ochranu soukromí uživatelů.
  • Ukládání všech aplikačních dat na server je drahé, zejména ve velkých měřítcích.

Existuje několik různých forem úložiště na straně klienta, které můžete použít ve svých webových aplikacích.

Soubory cookie

Soubor cookie prohlížeče je část dat klíč/hodnota uložená jako řetězec ve vašem počítači. Prohlížeče odesílají všechny soubory cookie pro konkrétní web na server webu při každém požadavku. Soubory cookie byly prvním (a na chvíli i jediným) typem úložiště na straně klienta.

Neexistuje žádný oficiální limit velikosti souboru cookie, ale jednotlivé prohlížeče stanoví různé limity na velikost a počet souborů cookie, které můžete nastavit. The RFC 6265, oddíl 6.1 uvádí následující minimální možnosti souborů cookie, které by prohlížeče (uživatelští agenti) měli poskytovat:

Praktické implementace uživatelských agentů mají limity na počet a velikost souborů cookie, které mohou ukládat. Agenti pro všeobecné použití BY MĚLI poskytovat každou z následujících minimálních schopností:

  • Alespoň 4096 bajtů na cookie (měřeno součtem délky názvu, hodnoty a atributů cookie).
  • Minimálně 50 cookies na doménu.
  • Celkem alespoň 3000 cookies.

Soubory cookie mohou zůstat v prohlížeči různě dlouhou dobu. Některé vyprší na konci relace stránky a některé mají libovolná data vypršení platnosti, která se mohou protáhnout až na měsíce do budoucnosti.

Prohlížeče vytvoří relaci stránky, když otevřete novou kartu, a ukončí ji, když kartu nebo prohlížeč zavřete. Pokud stránku znovu načtete nebo obnovíte, prohlížeč relaci stránky neukončí.

Případy použití pro soubory cookie

Soubory cookie se nejlépe hodí k ukládání malých částí dat, které server často potřebuje číst nebo upravovat. Proč?

  • Cookies jsou automaticky připojeny ke všem síťovým požadavkům
  • Soubory cookie mohou ukládat pouze malé množství řetězcových dat.

Soubory cookie můžete použít k identifikaci uživatele (např. ID relace), zaznamenání návštěvy stránky pro účely ukládání do záložek nebo uložení nejvyššího skóre hry.

Místní úložiště

Stejně jako soubor cookie je localStorage úložiště klíčů a hodnot, které ukládá data řetězce. Zatímco oba typy úložiště jsou podobné, localStorage a soubory cookie se liší několika způsoby:

  • LocalStorage závisí na JavaScriptu.
  • Data v localStorage jsou primárně uložena v prohlížeči. Musíte jej záměrně odeslat na server, místo aby jej prohlížeč posílal při každém požadavku.
  • LocalStorage nemá žádné datum vypršení platnosti. Přetrvává na klientovi, dokud jej vývojář neodstraní pomocí JavaScriptu nebo dokud uživatel nevymaže úložiště prohlížeče.
  • LocalStorage má mnohem větší úložnou kapacitu. The Specifikace WHATWG neurčuje pevný limit, ale podle Wikipedie, minimální velikost localStorage mezi hlavními prohlížeči je 5 MB:

Prohlížeče omezují soubory cookie na 4 kilobajty. Webové úložiště poskytuje mnohem větší úložnou kapacitu:

  • Opera 10.50+ umožňuje 5 MB
  • Safari 8 umožňuje 5 MB
  • Firefox 34 umožňuje 10 MB
  • Google Chrome umožňuje 10 MB na každý původ
  • Internet Explorer umožňuje 10 MB na úložnou oblast

Případy použití pro LocalStorage

LocalStorage je ideální pro ukládání velkého množství dat, na která server zřídka potřebuje odkazovat. Může se jednat o uživatelská nastavení aplikace, podrobnosti o konfiguraci motivu nebo data v nedávno vyplněném formuláři. Důvodem je to, že localStorage má mnohem větší limit úložiště než soubory cookie, ale k odeslání jeho dat na server musíte vynaložit další úsilí.

Pokud data uložíte jako JSON, můžete pomocí localStorage ukládat přiměřeně složitá data, i když může ukládat pouze řetězce.

LocalStorage je zranitelný vůči XSS útoky, takže byste do něj neměli ukládat citlivá klientská data.

SessionStorage

SessionStorage je úložiště klíč/hodnota, které funguje téměř stejné jako localStorage, až na jednu věc. Uložená data přetrvávají pouze po dobu relace stránky.

Případy použití pro SessionStorage

SessionStorage můžete použít k uložení stejného typu dat jako localStorage, ale pouze v případě, že data nemusí přetrvávat po relaci stránky.

IndexovanáDB

IndexedDB je výkonné rozhraní API prohlížeče pro ukládání velkého množství strukturovaných dat. Jedná se o transakční, objektově orientovanou databázi, která ukládá data v párech klíč/hodnota.

Pokud pracujete s menším množstvím dat, localStorage/sessionStorage je lepší a jednodušší volba. Bohužel jsou omezeny svou kapacitou úložiště a skutečností, že mohou ukládat pouze data řetězce. IndexedDB umožňuje nejen ukládat různé typy dat včetně souborů/binárních dat, ale může také ukládat mnohem více dat. IndexedDB také konstruuje indexy svého obsahu, které umožňují rychlé vyhledávání v databázi.

Případy použití pro IndexedDB

IndexedDB je v podstatě databáze NoSQL v prohlížeči a může ukládat velmi velké množství dat. Pro IndexedDB je vhodný jakýkoli případ použití, který vyžaduje uložení více než 10 MB dat.

Na rozdíl od jiných forem úložiště prohlížeče se IndexedDB neomezuje na ukládání řetězců. IndexedDB může ukládat data všech standardních typů JavaScriptu. Pokud vytvoříte webovou aplikaci pro práci primárně offline, můžete použít IndexedDB k uložení všech dat aplikace.

Úložiště na straně klienta je flexibilní a výkonné

Termín úložiště na straně klienta odkazuje na ukládání dat aplikace v prohlížeči. Úložiště na straně klienta je nezbytné pro fungování většiny moderních webových aplikací. Existují různé typy úložiště na straně klienta: cookies, local/sessionStorage a IndexedDB.

Všechny typy úložiště prohlížeče mají různá omezení kapacity a typu dat, která mohou ukládat. Soubory cookie jsou nejomezenějším typem, nejpohodlnější je místní úložiště/sessionStorage a nejvýkonnější je IndexedDB.