Místní úložiště. Používání localStorage pro JavaScript vyžaduje lokální úložiště cookie

Soubory cookie, které jsme analyzovali v předchozí lekci, jsou velmi omezené: v jednom souboru cookie může být pouze 4096 znaků a počet souborů cookie na doménu může být přibližně 30–50 v závislosti na prohlížeči. Proto, bohužel, nebude možné tam uložit mnoho informací. Stalo se tak historicky.

Aby bylo možné toto omezení obejít, objevila se v prohlížečích alternativa k cookies - říká se jí lokální úložiště. V místním úložišti můžeme dlouhodobě uchovávat 5-10 megabajtů informací nebo i více.

Práce s místním úložištěm

Objekt localStorage zabudovaný do prohlížeče je určen pro práci s místním úložištěm. Má 4 snadno srozumitelné metody. Zde jsou:

// Uložte hodnotu: localStorage.setItem ("Klíč", "Hodnota"); // Získejte hodnotu: var value = localStorage.getItem ("Key"); // Odebrat hodnotu: localStorage.removeItem ("Key"); // Vymazání veškerého úložiště: localStorage.clear ();

S místní úložiště můžete také pracovat jako běžné pole:

// Uložte hodnotu: localStorage ["Key"] = "Value"; // Získejte hodnotu: var value = localStorage ["Key"]; // Odstranit hodnotu: odstranit localStorage ["Klíč"];

Kromě předmětu místní úložiště existuje také předmět sessionStorage... Práce s ním probíhá stejným způsobem, pouze s tím rozdílem, že všechna data z něj jsou automaticky zničena po zavření prohlížeče nebo karty s webem. LocalStorage ukládá data na dlouhou dobu, dokud tato data neodstraní skript nebo uživatel prohlížeče nevymaže místní úložiště pomocí nastavení.

Příklady

V následujícím příkladu zapíšeme uživatelské jméno do místního úložiště:

LocalStorage.setItem ("jméno", "Ivan");

Po nějaké době dostaneme zpět toto jméno:

Alert (localStorage.getItem ("name"));

Jak vidíte, zde není nic složitého, vše je mnohem jednodušší než stejná práce s cookies.

Ukládání předmětů

Místní úložiště není schopno ukládat objekty JavaScript a pole, i když je to často praktické. Existuje ale způsob - tato data je třeba serializovat do formátu JSON - získáte řetězec, který již lze uložit do localStorage. Potom, když potřebujeme získat tento objekt zpět - převést řetězec z JSON zpět na objekt - a použít jej v klidu.

Podívejme se na tento proces na příkladu. Serializujte objekt a uložte jej do místního úložiště:

// Vzhledem k objektu: var obj = (jméno: "Ivan", arr :); // Serializace na "(" name ":" Ivan "," arr ":)": var json = JSON.stringify (obj); // Zápis na localStorage klíčem obj: localStorage.setItem ("obj", json);

Po chvíli získáme předmět zpět:

// Získejte data zpět z localStorage jako JSON: var json = localStorage.getItem ("obj"); // Převeďte je zpět na objekt JavaScript: var obj = JSON.parse (json); console.log (obj);

Další funkce

Určení počtu záznamů v úložišti: upozornění (localStorage.length).

Určení názvu klíče podle jeho čísla: alert (localStorage.key (number)).

Při provádění operací s úložištěm se spustí událost skladování... Pokud k této události připojíte funkci, bude v ní k dispozici objekt Event s následujícími vlastnostmi:

funkce func (událost) (var klíč = event.key; // klíč měnících se dat var oldValue = event.oldValue; // stará hodnota var newValue = event.newValue; // nová hodnota var storageArea = event.storageArea; // storageArea)

Přidat. materiál

Uložení pole do místního úložiště: https://youtu.be/sYUILPMnrIo

Co dělat dál:

Začněte řešit problémy na následujícím odkazu: úkoly pro lekci.

Až budete o všem rozhodnuti, přejděte ke studiu nového tématu.

Lekce č.
seznam skladeb na youtube
Praktický ES6

Některá videa mohou běžet dopředu, protože jsme v tutoriálu neprošli všemi ES6 na toto místo. Přeskočte tato videa a podívejte se na ně později.

Přehled webového úložiště

Na internetu mohou být informace uloženy na dvou místech: na webovém serveru a na webovém klientovi (tj. Počítači návštěvníka stránky). Některé datové typy jsou nejlépe uloženy v jednom z těchto umístění a jiné typy v jiném.

Správným místem pro ukládání citlivých a důležitých dat je webový server. Pokud například přidáte položky do nákupního košíku v internetovém obchodě, vaše potenciální údaje o nákupu se uloží na webový server. Ve vašem počítači je uloženo jen několik bajtů sledovacích dat, které obsahují informace o vás (nebo spíše o vašem počítači), aby webový server věděl, který segment je váš. I přes nové možnosti HTML5 není třeba tento systém měnit - je spolehlivý, bezpečný a efektivní.

Ale ukládání dat na server není vždy nejlepší přístup. někdy je jednodušší ukládat na počítači uživatele nepodstatné informace. Například má smysl ukládat předvolby uživatele (řekněme nastavení, která určují, jak se webová stránka zobrazuje) a stav aplikace (snímek aktuálního stavu webové aplikace) lokálně, aby návštěvník mohl pokračovat z místa, kde byl později. čas.

Před HTML5 byl jediným způsobem místního ukládání dat použití mechanismu souborů cookies který byl původně navržen pro výměnu malého množství identifikačních informací mezi webovými servery a prohlížeči. Soubory cookie jsou ideální pro ukládání malého množství dat, ale model JavaScript pro práci s nimi je poněkud neohrabaný. Systém souborů cookie také nutí vývojáře hrát si s daty vypršení platnosti a při každém požadavku na stránku zbytečně posílat data tam a zpět přes internet.

HTML5 představuje lepší alternativu k souborům cookie, což usnadňuje a usnadňuje ukládání informací do počítače návštěvníka. Tyto informace lze ukládat na klientský počítač po neomezenou dobu, neposílají se na webový server (pokud si to vývojář neudělá sám), mohou být velké a pro práci vyžaduje pouze několik jednoduchých a efektivních objektů JavaScript.

Tato příležitost se nazývá webové úložiště a je zvláště vhodný pro použití s offline mód práci webových stránek, protože umožňuje vytvářet samostatné samostatné aplikace, které mohou ukládat všechny potřebné informace, i když není k dispozici připojení k internetu.

Funkce webového úložiště HTML5 umožňuje webové stránce ukládat data do počítače návštěvníka. Tyto informace mohou být krátkodobé, které se vymažou po vypnutí prohlížeče, nebo dlouhodobé, které zůstanou k dispozici při následných návštěvách webové stránky.

Informace uložené ve webovém úložišti nejsou ve skutečnosti uloženy na internetu, ale v počítači návštěvníka webové stránky. Jinými slovy, webové úložiště neznamená ukládání dat na internet, ale ukládání dat z internetu.

Existují dva typy webového úložiště, které jsou nějakým způsobem spojeny se dvěma objekty:

Místní úložiště

Používá objekt místní úložiště k trvalému ukládání dat pro celý web. To znamená, že pokud webová stránka ukládá data do místního úložiště, budou tato data k dispozici uživateli, když se na danou webovou stránku vrátí další den, příští týden nebo příští rok.

Většina prohlížečů samozřejmě také poskytuje uživateli možnost vymazat místní úložiště. V některých prohlížečích je implementován jako strategie typu vše nebo nic a odstraní všechna místní data, podobně jako je odstraněn soubor cookie. (Ve skutečnosti jsou v některých prohlížečích soubory cookie a místní úložiště propojeny, takže jediným způsobem, jak odstranit místní data, je odstranit soubory cookie.) Jiné prohlížeče mohou uživateli poskytnout možnost zobrazit data pro každý jednotlivý web a odstranit data pro vybraný web nebo weby.

Úložiště dat relace

Používá objekt sessionStorage dočasně ukládat data pro jedno okno nebo kartu prohlížeče. Tato data jsou k dispozici pouze do doby, než uživatel zavře okno nebo kartu, poté relace skončí a data se odstraní. Data relací však přetrvávají, pokud uživatel přejde na jiný web a poté se vrátí zpět, za předpokladu, že k tomu dojde ve stejném okně prohlížeče.

Z hlediska kódu webové stránky funguje lokální úložiště i úložiště dat relace úplně stejně. Jediným rozdílem je doba uložení dat.

Použití místního úložiště poskytuje nejlepší příležitost k uložení požadovaných informací pro následné návštěvy webových stránek uživatelem. A úložiště relací slouží k ukládání dat, která je třeba přenést z jedné stránky na druhou. (Obchod relací může také ukládat dočasná data používaná pouze jednou stránkou, ale běžné proměnné JavaScriptu pro tento účel fungují dobře.)

S doménou webu je spojeno místní úložiště i úložiště relací. Pokud tedy uložíte data pro stránku www..html do místního úložiště, budou tato data k dispozici pro stránku www..html, protože obě tyto stránky mají stejnou doménu. Tato data však nebudou k dispozici pro stránky jiných domén.

Navíc od webové úložiště je umístěno ve vašem počítači (nebo mobilní zařízení) daný uživatel, je přidružen k tomuto počítači a webová stránka se otevře na tento počítač a ukládání dat do místního úložiště nemá přístup k informacím, které má uložené na jiném počítači. Podobně webová stránka vytvoří samostatný místní obchod, pokud se přihlásíte pod jiným uživatelským jménem nebo spustíte jiný prohlížeč.

Zatímco specifikace HTML5 nestanovuje žádná tvrdá a rychlá pravidla pro maximální úložiště, většina prohlížečů ji omezuje na 5 MB. Do tohoto svazku můžete zabalit spoustu dat, ale nebude to stačit, pokud chcete použít místní úložiště k optimalizaci výkonu a ukládání velkých obrázků nebo videí do mezipaměti (a ve skutečnosti místní úložiště není pro takové účely navrženo ).

Stále se vyvíjející databázový standard pro ukládání velkého množství dat IndexedDB Umožňuje mnohem více místního úložiště - obvykle 50 MB pro začátek a více, pokud uživatel souhlasí.

Ukládání dat

Než vložíte informaci do místního úložiště nebo úložiště relací, musíte jí dát popisný název. Tento název se nazývá klíč a je potřebný k tomu, aby bylo možné data v budoucnu načíst.

Syntaxe pro uložení kusu dat je následující:

localStorage = data;

// JS localStorage ["username"] = "Ivan Petrov";

Samozřejmě nemá smysl ukládat kus statického textu. Zpravidla musíme uložit nějaký druh proměnných dat, například aktuální datum, výsledek matematického výpočtu nebo textová data zadaná uživatelem do polí formuláře. Následuje příklad ukládání textových dat zadaných uživatelem:

Webové úložiště Tento text bude uložen do místního úložiště:
Tento text bude uložen do úložiště dat relace:

Funkce saveData () (// Získání hodnot textových polí var localData = document.getElementById ("localData"). Hodnota; var sessionData = document.getElementById ("sessionData"). Hodnota; // Uložení zadaného textu do textového pole do místního úložiště localStorage ["localData"] = localData; // uložte text zadaný do textového pole do úložiště relace sessionStorage ["sessionData"] = sessionData;) funkce loadData () (// načtení uloženého data z úložišť var localData = localStorage ["localData"]; var sessionData = sessionStorage ["sessionData"]; // Zobrazení těchto dat v textových polích if (localData! = null) (document.getElementById ("localData"). hodnota = localData;) if (sessionData! = null) (document.getElementById ("sessionData"). value = sessionData;))

Stránka obsahuje dvě textová pole: pro místní úložiště (nahoře) a pro úložiště relací (dole). Kliknutím na tlačítko Uložit uložíte text zadaný do textových polí a kliknutím na tlačítko Načíst se v polích zobrazí odpovídající uložená data.

Web Storage také podporuje méně běžnou syntaxi vlastností. Podle pravidel této syntaxe označujeme místo úložiště s názvem uživatelské jméno jako localStorage.username, nikoli localStorage ["uživatelské jméno"]. Oba typy syntaxe jsou ekvivalentní a použití jednoho nebo druhého je věcí osobních preferencí.

Webové úložiště nefunguje bez webového serveru

Při průzkumu webového úložiště můžete narazit na neočekávaný problém. V mnoha prohlížečích funguje webové úložiště pouze pro stránky poskytované webovým serverem. V tomto případě nezáleží na tom, kde se server nachází, na internetu nebo na vašem vlastním počítači, nejdůležitější je, aby se stránky nespouštěly z lokálního pevný disk(například, dvojklik ikonou souboru stránky).

Tato funkce je vedlejším efektem způsobu, jakým prohlížeče přidělují místní úložný prostor. Jak již bylo řečeno, prohlížeče omezují místní úložiště pro každý web na 5 MB přidružením každé stránky, která chce využívat místní úložiště, k doméně webu.

Co se stane, když otevřete stránku, která využívá webové úložiště, z místního pevného disku? Vše závisí na prohlížeči. Prohlížeč internet Explorer Zdá se, že úplně ztrácí podporu webového úložiště. Objekty localStorage a sessionStorage zmizí a pokus o jejich použití vyvolá chybu JavaScriptu.

Ve Firefoxu objekty localStorage a sessionStorage zůstávají na svém místě a zdají se být podporovány (dokonce i Modernizr zjistí, že jsou podporovány), ale vše, co je odesláno do úložiště, zmizí, nikdo neví kde. PROTI Prohlížeč Chrome opět něco jiného - většina funkcí webového úložiště funguje, jak má, ale některé funkce (například událost onStorage) nefungují.

Podobné problémy vznikají s File API. Proto si ušetříte spoustu starostí, pokud stránku testujete na testovacím serveru, abyste se vyhnuli všem těmto nejasnostem.

Podpora webového úložiště pomocí prohlížečů

Web Storage je jednou z nejvíce podporovaných funkcí HTML5 s dobrou úrovní podpory v každém větším prohlížeči. Níže uvedená tabulka ukazuje minimální verze hlavních prohlížečů, které podporují webové úložiště:

Všechny tyto prohlížeče poskytují možnost ukládání místních i relačních dat. K podpoře události onStorage jsou však vyžadovány novější verze prohlížečů, například IE 9, Firefox 4 nebo Chrome 6.

Nejproblematičtější je IE 7, který webové úložiště vůbec nepodporuje. Jako alternativní řešení můžete emulovat webové úložiště pomocí cookies. Toto není opravdu dokonalé řešení, ale funguje to. Ačkoli neexistuje žádný oficiální skript, který by tuto mezeru zacelil, několik dobrých výchozích bodů najdete na stránce křížového prohlížeče HTML5 (v části „Webové úložiště“).

Překlad článku: Jak používat místní úložiště pro JavaScript.
Sara Vieira.

Seznámení se základy programování v JavaScriptu často začíná vytvářením nejjednodušších aplikací, jako je například elektronický notebook, pomocí kterého zaznamenáváme věci a události, na které můžeme zapomenout. Takové aplikace ale mají jeden problém - po opětovném načtení stránky zmizí seznam všech dříve ponechaných záznamů, to znamená, že se aplikace vrátí do původního stavu.

Existuje velmi jednoduchá cesta ven z této situace pomocí mechanismu localStorage. Vzhledem k tomu, že nám localStorage umožňuje ukládat potřebná data na počítač uživatele, bude výše uvedený seznam naplánovaných úkolů a událostí stále k dispozici i po opětovném načtení stránky, navíc localStorage je překvapivě velmi jednoduchý způsob ukládání dat a přístupu když je potřeba.

Co je localStorage?

Jedná se o modul místního úložiště, který je součástí technologie Web Storage specifikované ve specifikaci HTML5. Tato specifikace povoluje dvě možnosti úložiště:

Místní úložiště: umožňuje ukládat informace bez omezení doby uložení. Tuto možnost použijeme, protože seznam úkolů dostupných v našem příkladu by měl být uložen trvale.
Použití relací: zajišťuje bezpečnost dat pouze po dobu jedné relace, to znamená, že poté, co uživatel zavře kartu naší aplikace a znovu ji otevře, vše potřebné pro další práce informace o aplikaci budou odstraněny.

Jednoduše řečeno, vše, co Web Storage dělá, je ukládat data ve formuláři pojmenovaný klíč / hodnota lokálně a na rozdíl od ostatních dvou metod, z nichž každá má své nevýhody ( Ukládání informací relací poskytuje k tomu využití na straně serveru, kromě toho, po ukončení relace uživatele jsou tyto informace odstraněny, a přestože se soubory cookie používají pro ukládání na straně klienta, nejsou spolehlivé, protože uživatel může svou podporu zrušit prostřednictvím nastavení prohlížeče.) ukládá data, i když jste zavřeli prohlížeč nebo vypnuli počítač. ( * Dovolil jsem si mírně změnit a doplnit obsah tohoto odstavce, protože se domnívám, že autor udělal v originálu určité nepřesnosti.)

Html

Pokud se budeme držet našeho příkladu, ve kterém chceme vytvořit elektronickou verzi notebook, pak jsou všechny potřebné komponenty pro jeho implementaci uvedeny níže:

Pole pro zadávání nových záznamů (události, případy atd.).
Tlačítko pro potvrzení zadaného záznamu.
Tlačítko pro vymazání již vytvořeného seznamu úkolů.
Neuspořádaný seznam, který bude naplněn novými položkami.
Nakonec potřebujeme div jako kontejner, který bude obsahovat zprávy, které se budou zobrazovat uživateli, například varování, že zapomněl zadat hodnotu pro další záznam, přičemž pole pro zadávání ponechá prázdné.

V důsledku toho by naše označení mělo vypadat nějak takto:

Toto je docela standardní šablona HTML, kterou můžeme naplnit dynamicky generovaným obsahem pomocí JavaScriptu.

JavaScript

Pokud jde o strukturu nejjednodušší aplikace poznámkového bloku v našem příkladu, první věcí, kterou musíme udělat, je zajistit, aby byla sledována událost kliknutí na tlačítko. "Přidat poznámku" a zkontrolujte, zda jsou do textového pole pro záznam zadány nějaké informace, to znamená, že v okamžiku stisknutí tlačítka by neměly být prázdné. Něco takového:

$ ("# add"). klikněte (funkce () (
// pokud je textové pole prázdné
$ ("# alert"). html (" Pozornost! Zadejte položku do textu
pole.");
return false;
}

Zde je to, co děláme s tímto kusem kódu. Po stisknutí tlačítka "Přidat poznámku" zkontrolujeme, zda uživatel do pole pro nový záznam něco zadal. Pokud to neudělal, zobrazí se div, který jsme poskytli pro zobrazování zpráv, informující uživatele, že vstupní pole záznamu není vyplněno, a poté po 1000 ms (1 sekunda) prvek div a podle toho zpráva, zmizí. Funkce poté vrátí hodnotu false, poté prohlížeč přestane spouštět zbytek skriptu a aplikace je opět připravena k zadání nového záznamu.

Naším dalším krokem je přidání hodnoty zadané do pole záznamu na začátek seznamu vygenerováním nové položky seznamu. Když tedy uživatel přidá další záznam, bude vždy umístěn na začátek seznamu úkolů a očekávaných událostí. Poté musíme seznam uložit pomocí mechanismu localStorage:

// Přidání položky do existujícího seznamu
$ ("# todos"). prepend ("

" + Popis +"

");
// Vymazání vstupního pole
$ ("# form"). reset ();

return false;
});

Jak jste si mohli všimnout, není zde nic neobvyklého, používá se standardní verze jQuery kód. V místě přístupu k objektu localStorage musíme zadat data, která ukládáme, ve formě klíč / hodnota. Pro klíč lze použít libovolný název a pojmenoval jsem ho "úkoly", pak musíme naznačit, co ve skutečnosti potřebujeme mít v paměti. V tomto případě se jedná o kompletní část HTML kódu, která je zahrnuta v neuspořádaném seznamu (umístěném mezi tagy), který zobrazuje všechny dříve zadané záznamy uživatelem. Z kódu vidíte, že jednoduše extrahujeme potřebný fragment pomocí metody jQuery .html () a na konci, po dokončení všech nezbytných akcí, nastavíme návratovou hodnotu funkce na hodnotu false, což brání tvaru odeslání údajů, a tedy opětovné načtení naší stránky.

Nyní řekněme, že náš uživatel již provedl několik záznamů a pro další normální provoz aplikace musíme zkontrolovat, zda jsou v počítači v localStorage uloženy informace, a pokud ano, zobrazit je uživateli. Protože název našeho klíče je „todos“, musíme jeho existenci zkontrolovat následujícím způsobem:

// pokud v místním úložišti již jsou data, pak je zobrazte

}

Abychom zkontrolovali přítomnost dat, použili jsme obvyklý příkaz if a když byla splněna zadaná podmínka, jednoduše jsme všechna data stáhli z místního úložiště a umístili je jako značky HTML do neuspořádaného seznamu, pomocí kterého zobrazí se záznamy, které uživatel zadal dříve.

Pokud otestujete svoji nejjednodušší aplikaci, zjistíte, že po opětovném načtení stránky vše zůstane na svém místě. A teď poslední věc, kterou musíme udělat, je vytvořit funkci, pomocí které by uživatel v případě potřeby mohl odstranit všechny své záznamy. Toho je dosaženo vymazáním localStorage a opětovným načtením stránky k aktivaci provedených změn. Dále, stejně jako v předchozím případě, nastavíme false jako návratovou hodnotu funkce, která zabrání zobrazení hashe v URL. ( * a neposouvá stránku nahoru.):

// Úplné vyčištění localStorage
window.localStorage.clear ();
location.reload ();
return false;
});

Výsledkem je plně funkční aplikace. A když dáme dohromady všechny výše uvedené úryvky, získáme kompletní kód aplikace:

$ ("# add"). klikněte (funkce () (
var Description = $ ("# description"). val ();
if ($ ("# description"). val () == "") (
$ ("# alert"). html (" Pozornost! Zadejte vstup do
textové pole.");
$ ("# alert"). fadeIn (). delay (1000) .fadeOut ();
return false;
}
$ ("# todos"). prepend ("

"
+ Popis + "

");
$ ("# form"). reset ();
var todos = $ ("# todos"). html ();
localStorage.setItem ("todos", todos);
return false;
});

if (localStorage.getItem ("todos")) (
$ ("# todos"). html (localStorage.getItem ("todos"));
}

$ ("# clear"). klikněte (funkce () (
window.localStorage.clear ();
location.reload ();
return false;
});

Podpora prohlížeče.

Specifikace HTML5 poskytuje poměrně silnou podporu pro technologii Web Storage, díky čemuž ji implementuje také většina populárních prohlížečů, dokonce i IE8. IE7 zůstává jediným problémem, pokud vás to stále zajímá.

Závěr.

V takto malých aplikacích může mechanismus localStorage docela úspěšně nahradit používání databází. Pro ukládání malého množství dat není nutné používat důmyslnější alternativy.

* Poznámka překladatele.

Zobrazení příspěvků: 475

Překlad: Vlad Merzhevich

Trvalé místní úložiště je jednou z oblastí, kde klientské aplikace využívají výhody serverových aplikací. Pro aplikace jako operační systém, poskytuje vrstvu abstrakce pro ukládání a načítání dat, jako jsou nastavení nebo stav spuštění. Tyto hodnoty mohou být uloženy v registru, souborech INI, souborech XML nebo jinde v závislosti na zásadách platformy. Pokud vaše klientská aplikace potřebuje lokální úložiště pro více než jen pár klíč / hodnota, můžete vložit vlastní databázi, vymyslet vlastní formát souboru nebo libovolný počet dalších řešení.

Historicky webové aplikace neměly žádný z těchto luxusů. Soubory cookie byly vynalezeny na počátku historie internetu a lze je použít k trvalému lokálnímu ukládání malého množství dat. Mají však tři potenciální nevýhody:

Soubory cookie jsou součástí každého požadavku HTTP, čímž zpomalují vaši webovou aplikaci ve zbytečném přenosu stejných dat znovu a znovu.
Cookies jsou součástí každého požadavku HTTP, když jsou data přenášena přes internet v nešifrované podobě (i když je celá webová aplikace přenášena přes SSL);
Soubory cookie jsou omezeny na velikost dat přibližně 4 kB - dost na zpomalení aplikace (viz výše), ale ne natolik, aby byly užitečné.

Tady je to, co opravdu chceme:

spousta úložného prostoru;
práce na straně klienta;
vzít v úvahu aktualizaci stránky;
nedochází k odesílání na server.

Před HTML5 všechny pokusy o dosažení tohoto cíle nakonec různými způsoby selhaly.

Stručná historie místního úložiště před HTML5

Na začátku byl pouze jeden Internet Explorer. Microsoft alespoň chtěl, aby si to svět myslel. Za tímto účelem v rámci prvního Velká válka prohlížeče Microsoft vynalezl tolik věcí a začlenil je do svého prohlížeče, který skončil válku-Internet Explorer. Jedna z těchto věcí se nazývala DHTML Behaviors a jedno z chování se nazýva userData.

UserData umožňuje webové stránce ukládat až 64 kB dat na doménu v hierarchické struktuře podobné XML. Důvěryhodné domény, jako jsou intranetové weby, dokážou uložit desetkrát tolik. A hej, 640 KB by mělo stačit každému. IE neposkytlo žádný způsob, jak tyto konvence změnit, takže neexistuje způsob, jak zvýšit množství dostupné paměti.

V roce 2002 společnost Adobe představila ve Flash 6 funkci, která se ukázala jako nešťastná a se zavádějícím názvem - „Flash Cookies“. V prostředí Flash je tato schopnost lépe známá jako Local Shared Objects (LSO). Stručně řečeno, umožňuje objektům Flash ukládat až 100 kB dat na doménu. Brad Neuberg, který vyvinul raný prototyp mostu mezi Flashem a JavaScriptem, jej nazýval AMASS (AJAX Massive Storage System), ale byl omezen některými zvláštnostmi designu Flash. Do roku 2006 se zavedením ExternalInterface ve Flash 8 stal přístup k LSO prostřednictvím JavaScriptu řádově jednodušší a rychlejší. Brad přepsal AMASS a integroval jej do populární Dojo Toolkit pod alias dojox.storage. Flash „zdarma“ dává každé doméně 100 kB úložiště. Kromě toho vyzve uživatele, aby na požádání (1 MB, 10 MB atd.) Zvýšil kapacitu úložiště o řád.

if (Modernizr.localstorage) (
// window.localStorage je k dispozici!
) else (
// žádná nativní podpora úložiště HTML5
}

Použití úložiště HTML5

Úložiště HTML5 je založeno na názvech párů klíč / hodnota. Ukládáte informace na základě názvu klíče a poté můžete tato data načíst stejným klíčem. Název klíče je řetězec. Data mohou být jakéhokoli typu, který JavaScript podporuje, včetně řetězců, booleů, celých čísel nebo čísel s plovoucí desetinnou čárkou. Ve skutečnosti jsou však data uložena jako řetězec. Pokud ukládáte a načítáte jiné řetězce, budete muset použít funkce jako parseInt () nebo parseFloat () k překladu výsledných dat do platných typů JavaScriptu.

Rozhraní úložiště (
Získejte to pomocí getItem (klíč);
Nastavit pomocí setItem (klíč, data);
};

Volání setItem () s existujícím názvem klíče tiše přepíše předchozí hodnotu. Volání getItem () s neexistujícím klíčem vrátí NULL místo vyvolání výjimky.

Stejně jako ostatní objekty JavaScriptu můžete na objekt localStorage odkazovat jako na asociativní pole. Místo použití metod getItem () a setItem () můžete jednoduše zadat hranaté závorky... Například tento kus kódu

var foo = localStorage.getItem ("bar");
// ...
localStorage.setItem ("bar", foo);

lze přepsat pomocí syntaxe hranatých závorek:

var foo = localStorage ["bar"];
// ...
localStorage ["bar"] = foo;

Existují také metody pro odstranění hodnot podle názvu klíče a také pro vymazání celého úložiště (to znamená odstranění všech klíčů a hodnot současně).

Rozhraní úložiště (
Odebrat pomocí removeItem (klíč);
Průhledná ();
}

Volání removeItem () s neexistujícím klíčem nic nevrátí.

Nakonec existuje vlastnost pro získání celkového počtu hodnot v úložné oblasti a pro iteraci všech klíčů podle indexu (získá název každého klíče).

Rozhraní úložiště (
délka
Získat klíč (nezáporné celé číslo);
}

Pokud při volání klíče () není index v rozsahu od 0 do (délka-1), pak funkce vrátí hodnotu null.

Sledování oblasti úložiště HTML5

Pokud chcete programově sledovat změny úložiště, musíte zachytit událost úložiště. Tato událost se spustí na objekt okna, když se zavolá setItem (), removeItem () nebo clear () a něco změní. Pokud například nastavíte stávající hodnotu nebo zavoláte clear (), když nejsou k dispozici žádné klíče, událost se nespustí, protože oblast úložiště se ve skutečnosti nezměnila.

Událost úložiště je podporována všude, kde funguje objekt localStorage, včetně aplikace Internet Explorer 8. IE 8 nepodporuje standard W3C addEventListener (i když nakonec bude přidán v IE 9), takže pro zachycení události úložiště je třeba zkontrolovat, který modul událostí podporuje prohlížeč (pokud jste to již udělali u jiných událostí, můžete tuto část přeskočit až do konce). Zachycení události úložiště funguje stejným způsobem jako zachycení jiných událostí. Pokud dáváte přednost použití jQuery nebo jiné knihovny JavaScript k registraci obslužných rutin událostí, můžete to udělat také s úložištěm.

if (window.addEventListener) (
window.addEventListener ("úložiště", handle_storage, false);
) else (
window.attachEvent ("onstorage", handle_storage);
};

Zpětné volání handle_storage bude voláno s objektem StorageEvent, kromě aplikace Internet Explorer, kde jsou události ukládány do okna.event.

funkce handle_storage (e) (
if (! e) (e = window.event;)
}

V tomto případě e bude objekt StorageEvent, který má následující užitečné vlastnosti.

* Poznámka: Vlastnost url se původně jmenovala uri a některé prohlížeče tuto vlastnost podporovaly před změnou specifikace. Pro maximální kompatibilitu byste měli zkontrolovat, zda vlastnost url existuje, a pokud ne, zkontrolujte místo toho vlastnost uri.

Událost úložiště nelze zrušit, neexistuje způsob, jak zastavit změnu uvnitř zpětného volání handle_storage. Je to jen způsob, jakým vám prohlížeč říká: „Hej, to se právě stalo. Nedá se nic dělat, jen jsem chtěl, abys to věděl. "

Omezení v aktuálních prohlížečích

Když jsem hovořil o historii místního úložiště s doplňky třetích stran, zmínil jsem omezení každé techniky. Pamatoval jsem si, že jsem neřekl nic o omezeních dnes již standardního úložiště HTML5. Dám vám odpovědi a poté je vysvětlím. Odpovědi jsou seřazeny podle důležitosti „5 megabajtů“, „QUOTA_EXCEEDED_ERR“ a „ne“.

„5 megabajtů“ - kolik úložného prostoru je ve výchozím nastavení poskytováno. Tento význam je překvapivě stejný ve všech prohlížečích, ačkoli je ve specifikaci HTML5 formulován pouze jako návrh. Musíte pochopit, že ukládáte řetězce, nikoli data v původním formátu. Pokud uložíte mnoho celých čísel nebo čísel s plovoucí desetinnou čárkou, může být rozdíl v reprezentaci velký. Každá číslice v čísle s plovoucí desetinnou čárkou je uložena jako znak a ne v obvyklé reprezentaci pro taková čísla.

„QUOTA_EXCEEDED_ERR“ je výjimka, kterou získáte, pokud překročíte kvótu 5 MB. „Ne“ je odpovědí na další zřejmou otázku: „Mohu požádat uživatele o více úložného prostoru?“ V době psaní tohoto článku prohlížeče nezavedly žádný mechanismus, který by webovým vývojářům vyžadoval více úložného prostoru. Některé prohlížeče (například Opera) umožňují uživateli ovládat kvóty úložiště pro každý web, ale toto je čistě iniciativa uživatele, a nikoli něco, co můžete jako vývojář vložit do své webové aplikace.

Úložiště HTML5 v akci

Pojďme se podívat na úložiště HTML5 v akci. Vraťme se k té, kterou jsme postavili v kapitole kreslení. U této hry je malý problém: pokud uprostřed hry zavřete okno prohlížeče, přijdete o výsledky. Ale s úložištěm HTML5 můžeme udržet hru na místě, v samotném prohlížeči. Otevřete ukázku, proveďte několik tahů, zavřete kartu prohlížeče a poté ji znovu otevřete. Pokud váš prohlížeč podporuje úložiště HTML5, demo stránka si magicky zapamatuje přesnou pozici ve hře, včetně počtu provedených tahů, polohy jednotlivých figurek na hrací ploše a dokonce i vybrané figurky.

Jak to funguje? Pokaždé, když dojde ke změně ve hře, zavoláme tuto funkci.

funkce saveGameState () (

localStorage ["halma.game.in.progress"] = gGameInProgress;
pro (var i = 0; i< kNumPieces; i++) {
localStorage ["halma.piece." + i + ".row"] = gPieces [i] .row;
localStorage ["halma.piece." + i + ".column"] = gPieces [i] .column;
}
localStorage ["halma.selectedpiece"] = gSelectedPieceIndex;
localStorage ["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
localStorage ["halma.movecount"] = gMoveCount;
return true;
}

Jak vidíte, objekt localStorage slouží k uložení procesu hry (gGameInProgress, boolean). Dále jsou všechny tokeny (gPieces, pole JavaScript) iterovány a pro každý z nich je uložen řádek a sloupec. Poté se uloží některé další herní stavy, včetně vybraného kusu (gSelectedPieceIndex, celé číslo), kusu, který je uprostřed dlouhé série skoků (gSelectedPieceHasMoved, boolean) a celkového počtu provedených tahů (gMoveCount, integer) .

Když se stránka načte, namísto automatického volání funkce newGame (), která by vrátila všechny proměnné na původní hodnoty, voláme resumeGame (). Funkce resumeGame () používá úložiště HTML5 ke kontrole stavu hry v místním úložišti. Pokud je k dispozici, obnoví hodnoty pomocí objektu localStorage.

funkce resumeGame () (
if (! supportsLocalStorage ()) (return false;)
gGameInProgress = (localStorage ["halma.game.in.progress"] == "true");
if (! gGameInProgress) (return false;)
gPieces = nové pole (kNumPieces);
pro (var i = 0; i< kNumPieces; i++) {
var řádek = parseInt (localStorage ["halma.piece." + i + ".row"]);
var sloupec = parseInt (localStorage ["halma.piece." + i + ".column"]);
gPieces [i] = nová buňka (řádek, sloupec);
}
gNumPieces = kNumPieces;
gSelectedPieceIndex = parseInt (localStorage ["halma.selectedpiece"]);
gSelectedPieceHasMoved = localStorage ["halma.selectedpiecehasmoved"] == "true";
gMoveCount = parseInt (localStorage ["halma.movecount"]);
drawBoard ();
return true;
}

Nejdůležitější částí této funkce je upozornění, které jsem zmínil dříve v této kapitole a zde se bude opakovat: data jsou uložena jako řetězce. Pokud ukládáte něco jiného než řetězce, musíte je po přijetí převést. Například příznak, že hra probíhá (gGameInProgress), je booleovský typ. Ve funkci saveGameState () ji pouze uložíme a s datovým typem si hlavu nelámeme.

localStorage ["halma.game.in.progress"] = gGameInProgress;

Ale v resumeGame () se musíme podívat na hodnotu, kterou jsme získali z místního úložiště, jako řetězec a ručně vytvořit vlastní boolean.

gGameInProgress = (localStorage ["halma.game.in.progress"] == "true");

Stejně tak je počet tahů uložen v gMoveCount jako celé číslo, ve funkci saveGameState () jej jednoduše uložíme.

localStorage ["halma.movecount"] = gMoveCount;

Ale v resumeGame () musíme převést hodnotu na celé číslo pomocí vestavěné funkce parseInt () JavaScriptu.

gMoveCount = parseInt (localStorage ["halma.movecount"]);

Za párem klíč / hodnota: konkurenční vize

Přestože v historii bylo mnoho triků a řešení, současný stav úložiště HTML5 je překvapivě dobrý. Nové API bylo standardizováno a zahrnuto ve všech hlavních prohlížečích, platformách a zařízeních. U webového vývojáře to nevidíte každý den, že? Ale to je více než „5 megabajtů párů klíč / hodnota“ a budoucnost trvalého místního úložiště je ... jak to říct ... no, ať je to konkurenční vize.

Jedna vize je zkratka, kterou již znáte - SQL. V roce 2007 Google spustil Gears, plugin pro více prohlížečů s otevřeným zdrojovým kódem zdrojový kód který zahrnuje integrovanou databázi založenou na SQLite. Tento raný prototyp později ovlivnil tvorbu specifikace Web SQL Database. Web SQL Database (dříve známý jako „WebDB“) poskytuje tenký obal kolem databáze Data SQL, což vám umožňuje provádět následující věci z JavaScriptu:

openDatabase ("dokumenty", "1.0", "Místní úložiště dokumentů", 5 * 1024 * 1024, funkce (db) (
db.changeVersion ("", "1.0", funkce (t) (
t.executeSql ("VYTVOŘIT TABULKU docids (id, jméno)");
), chyba);
});

Jak vidíte, většina akcí je v souladu s metodou ExecuteSQL. Tento řetězec může podporovat jakýkoli příkaz SQL, včetně SELECT, UPDATE, INSERT a DELETE. Je to jako programování databází na straně serveru, kromě toho, že to děláte pomocí JavaScriptu! Ach radost!

Specifikace Web SQL Database byla implementována do čtyř prohlížečů a platforem.

Podpora webové databáze SQL

TJ	Firefox	Safari	Chrome	Opera	iPhone	Android
–	–	4.0+	4.0+	10.5+	3.0+	2.0+

Samozřejmě, pokud jste ve svém životě použili více než jednu databázi, pak víte, že „SQL“ je více marketingový termín než tvrdý a rychlý standard (někdo by mohl říci totéž o HTML5, ale to nevadí ). Samozřejmě existuje aktuální specifikace SQL (nazývaná SQL-92), ale na světě neexistuje žádný databázový server, který by této specifikaci pouze vyhovoval. Existuje Oracle SQL, Microsoft SQL, SQL v MySQL, SQL v PostgreSQL, SQL v SQLite. Ve skutečnosti každý z těchto produktů časem přidává nové. Funkce SQL, takže ani říkat „SQL v SQLite“ nestačí. Musíte říci „verze SQL, která je součástí verze SQLite X.Y.Z“.

To vše nás přivádí k dalšímu upozornění, aktuálně v horní části specifikace Web SQL.

Specifikace je ve slepé uličce: všichni zainteresovaní vývojáři používají serverový server SQL (SQLite), ale k přechodu ke standardizaci potřebujeme několik nezávislých implementací. Zatímco ostatní vývojáři mají zájem implementovat tuto specifikaci, popis dialektu SQL byl ponechán jako pravidelný odkaz na Sqlite, což není pro standard přijatelné.

Na tomto pozadí se s vámi podělím o další konkurenční vizi pokročilého, trvalého místního úložiště pro webové aplikace: API pro indexovanou databázi, dříve známé jako „WebSimpleDB“, nyní láskyplně nazývané IndexedDB.

Indexované databázové rozhraní API poskytuje takzvané úložiště objektů se spoustou nápadů vypůjčených z databází SQL. Existují „databáze“ s „záznamy“, každý záznam má určitý počet „polí“. Každé pole má specifický datový typ, který je definován při vytváření databáze. Můžete vybrat část záznamů a poté je zobrazit pomocí „kurzoru“. Změny úložiště objektů jsou zpracovávány pomocí „transakcí“.

Pokud jste někdy programovali databáze SQL, jsou vám tyto pojmy pravděpodobně známé. Hlavní rozdíl je v tom, že úložiště objektů nemá strukturovaný dotazovací jazyk. Nepíšete podmínku jako „VYBRAT * od UŽIVATELŮ, kde ACTIVE =„ Y ““. Místo toho používá metody poskytnuté úložištěm objektů k otevření databáze UŽIVATELŮ, výčtu záznamů, filtrování našich záznamů a použití přístupových metod k získání hodnoty každého pole zbývajících záznamů. Počáteční procházení IndexedDB je dobrým průvodcem, jak funguje IndexedDB a porovnává IndexedDB s Web SQL.

V době psaní byl IndexedDB implementován pouze v beta verzi Firefoxu 4. Mozilla naopak uvedla, že nikdy nebude implementovat Web SQL. Google uvedl, že zvažuje podporu IndexedDB pro Chromium a Google Chrome... A dokonce Microsoft říká, že IndexedDB je „skvělý pro web“.

Co můžete dělat jako webový vývojář s IndexedDB? Na tento moment prakticky nic jiného než nějaké technologické ukázky. V roce? Možná.