Toto je příspěvek hosta Babacka Rashtizadeha, nezávislého designéra UI/UX a front-end vývojáře s vášní pro kódování a psaní.
Téměř každá desktopová nebo mobilní aplikace potřebuje někam ukládat uživatelská data. Ale co třeba web? V minulosti jsme k tomuto účelu používali soubory cookie, ale mají vážná omezení. HTML5 nám poskytuje lepší nástroje k řešení tohoto problému. První je IndexedDB, což je přehnaná náhrada souborů cookie, a Web Storage, což je kombinace dvou velmi jednoduchých API a které vám dnes ukážu.
Co je webové úložiště?
Obecně řečeno, Web Storage (také známé jako Dom Storage) označuje sadu rozhraní API, která se pokoušejí poskytnout jednoduchý způsob ukládání dat na straně klienta v prohlížeči. Je bezpečnější a rychlejší než soubory cookie, nemluvě o výkonnějším. Data jsou uložena v prohlížeči uživatele a nejsou přenášena po síti, jako jsou soubory cookie. Je také možné ukládat větší množství dat než soubory cookie, aniž by to ovlivnilo výkon vašeho webu.
Web Storage poskytuje dva úžasné objekty pro ukládání dat:
- místní úložiště: Pomocí tohoto objektu budete ukládat data bez data vypršení platnosti, což znamená, že data budou navždy uložena v místním úložišti uživatele;
- sessionStorage: Při použití tohoto objektu tam budou data, která jste uložili, dokud návštěvník nezavře prohlížeč (nikoli kartu). Dobrým případem použití je uložení dočasných dat, jako je obsah formuláře, který uživatel vyplňuje, pro případ, že kartu zavře nebo omylem znovu načte stránku.
Začínáme
Takže teď, když víme, co je to Web Storage, je čas, abychom to dostali do rukou.
místní úložiště
Ukládání dat do localStorage je velmi jednoduché - stačí jej přiřadit jako vlastnost . Čtení je přesně tak jednoduché, jak můžete vidět na příkladu níže:
localStorage.myText = 'This is some text which have been stored with localStorage object';
document.getElementById("text").innerHTML= localStorage.myText; sessionStorage
Ukládání a načítání dat z sessionStorage se provádí stejným způsobem:
sessionStorage.myText = 'This is some text which have been stored with sessionStorage object';
document.getElementById("text").innerHTML= sessionStorage.myText;
Oba objekty mají setItem() , getItem() a removeItem() metody, které můžete také použít:
localStorage.setItem('username','Johnny');
console.log(localStorage.getItem('username'));
localStorage.removeItem('username'); // Johnny is no more! Můžete je také iterovat jako běžné objekty a zkontrolovat jejich délku:
console.log(localStorage.length);
for(var i in localStorage){ console.log(localStorage[i]);} Toto jsou pouze základy pro používání webového úložiště, ale k implementaci API do webových aplikací vám postačí. S webovým úložištěm můžete dělat více úžasných věcí, jak za chvíli uvidíte.
Podpora prohlížeče
Jak už to u úžasných funkcí HTML5 bývá, musíte se před použitím podívat na seznam podporovaných prohlížečů. Web Storage je podporován téměř všemi moderními prohlížeči včetně IE8+, takže je připraven k použití. Bohužel IE7 a starší verze Internet Exploreru nepodporují rozhraní API, takže pokud je chcete podporovat, budete muset použít jednu z níže uvedených záložních možností.
Knihovny JavaScriptu pro webové úložiště
Zde jsou některé skvělé JavaScriptové knihovny, které posouvají Web Storage na další úroveň:
basket.js
Jednoduchý (proof-of-concept) zavaděč skriptů, který ukládá skripty do mezipaměti pomocí localStorage.
Kizzy
Lehký nástroj pro místní úložiště JavaScript pro různé prohlížeče.
LocalDB.js
Nástroj, který mapuje strukturu databází v objektech pomocí localStorage API.
Rockstage.js
Knihovna JavaScript pro používání localStorage a sessionStorage je jednodušší.
store.js
store.js zpřístupňuje jednoduché rozhraní API pro místní úložiště napříč prohlížeči.
Závěr
Web Storage je skvělá funkce HTML5, a přestože od jejího představení uplynula nějaká doba, nyní pro ni máme spoustu skvělých knihoven. Pamatujte, že toto je jen stručný průvodce a že se o Web Storage můžete dozvědět ještě mnoho dalších věcí, ale doufám, že vás tento článek navede na správnou cestu!