Toto je docela standardní HTML kontejner a s naším JavaScriptem můžeme celou věc naplnit dynamickým obsahem.

Protože v tomto příkladu použijeme JQuery, měli byste jej také zahrnout do dokumentu HTML.

JavaScript

Pokud přemýšlíme o struktuře jednoduché aplikace „seznam úkolů“, první věc, kterou musíme udělat, je zkontrolovat, zda je vstup prázdný, když uživatel klikne na tlačítko „přidat“ nebo „ověřit“:

$("#add").click(function() ( var Description = $("#description").val(); //pokud je úkol prázdný if($("#description").val( ) == "") ( $("#alert").html(" Varování!Úkol jste nechali prázdný"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )

Jediné, co jsme udělali, bylo otestovat kliknutí na tlačítko Přidat a provést jednoduchý test, abychom zjistili, zda uživatel zadání něčím vyplnil. Pokud ne, objeví se výstraha div a zůstane po dobu 1000 ms a poté zmizí.

Další věc, kterou musíme udělat, je vložit položku seznamu s hodnotou do vstupního řádku a to uvedeme tak, že když uživatel přidá úkol, bude vždy na začátku seznamu a poté seznam uložíme položku do místního úložiště, takto:

// přidání položky seznamu $("#todos").prepend("

Jak můžete vidět, toto je docela standardní jQuery a pokud jde o místní úložiště, musíme uložit klíč a hodnotu. Klíčem je jméno, které si dáme, v tomto případě jej nazveme jednoduše „Todos“, pak musíme definovat, co chceme uložit a v v tomto případě toto je všechno HTML, které je uvnitř neuspořádaného seznamu Todos. Jak vidíte, vše jsme zachytili pomocí jQuery a nakonec vrátili false, aby formulář neselhal a naše stránka se neobnovovala.

Naším dalším krokem je zkontrolovat, zda máme něco uloženého v místním úložišti. Pokud existuje, musíme jej umístit na stránku, protože jsme dali našemu klíči jméno „todos“, musíme zkontrolovat jeho existenci. Takhle:

// pokud máme něco v místním úložišti, že if(localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )

Pokud naši aplikaci otestujete a stránku znovu načtete, uvidíte, že již funguje. Jediné, co musíme udělat, je vytvořit funkci, která bude zodpovědná za vyčištění celého seznamu. Vymažeme veškeré místní úložiště, znovu načteme stránku, aby se naše změna projevila, a poté vrátíme hodnotu „false“, abychom zabránili hašování před adresou URL takto:

// vymaže veškeré místní úložiště $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));

Celý kód jak následuje:

$("#add").click(function() ( var Description = $("#description").val(); if($("#description").val() == "") ( $( "#alert").html(" Varování!Úkol jste nechali prázdný"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("

Podpora prohlížeče

Podpora Web Storage je na specifikace HTML5 docela dobrá, podporují ji všechny hlavní prohlížeče a dokonce i IE8.

Překlad: Vlad Merzhevich

Trvalé místní úložiště je jednou z oblastí, kde mají klientské aplikace výhody oproti serverovým aplikacím. Pro aplikace jako např operační systém, poskytuje abstrakční vrstvu pro ukládání a načítání dat, jako je nastavení nebo stav provádění. Tyto hodnoty mohou být uloženy v registru, souborech INI, souborech XML nebo jinde v závislosti na principech 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, přijít s vlastním formátem souborů nebo libovolným počtem 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 pro trvalé místní úložiště malé objemy data. Ale mají tři potenciální nevýhody:

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

Zde je to, co opravdu chceme:

• dostatek úložného prostoru;
• práce na straně klienta;
• vzít v úvahu obnovení stránky;
• žádné 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. Alespoň to Microsoft chtěl, aby si svět myslel. Za tímto účelem v rámci I Velká válka prohlížeče Microsoft vynalezl spoustu věcí a zahrnul je do svého prohlížeče Internet Explorer, který ukončil válku. Jedna z těchto věcí se jmenovala DHTML Behaviors a jedna z těchto věcí se jmenovala userData.

UserData umožňuje webové stránce uložit až 64 KB dat na doménu v hierarchické struktuře podobné XML. Důvěryhodné domény, jako jsou intranetové stránky, mohou uložit desetkrát více. A ejhle, 640 KB by mělo stačit všem. 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 funkci ve Flashi 6, která byla neúspěšná a zavádějící pojmenovaná „Flash Cookies“. V Flash prostředí tato schopnost je lépe známá jako místní sdílené objekty (LSO). Stručně řečeno, umožňuje Flash objektům uložit až 100 KB dat na doménu. Brad Neuberg, který vyvinul raný prototyp mostu mezi Flashem a JavaScriptem, jej nazval AMASS (AJAX Massive Storage System), ale byl omezen některými zvláštnostmi návrhu Flash. V roce 2006, se zavedením ExternalInterface ve Flash 8, se přístup k LSO přes JavaScript stal řádově jednodušším a rychlejším. Brad přepsal AMASS a integroval jej do populární sady nástrojů Dojo pod alias dojox.storage. Flash poskytuje každé doméně 100 kb úložného prostoru „zdarma“. Uživateli navíc na požádání nabízí řádově navýšit objem úložiště (1 MB, 10 MB atd.).

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

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

Úložiště HTML5 je založeno na názvech párů klíč/hodnota. Uložíte informace na základě názvu klíče a poté můžete tato data načíst pomocí stejného klíče. Název klíče je řetězec. Data mohou být libovolného typu, který JavaScript podporuje, včetně řetězců, booleanů, 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é než řetězce, budete muset použít funkce jako parseInt() nebo parseFloat() k převodu přijatých dat na správné typy JavaScriptu.

Rozhraní úložiště (
Získat přes getItem(key);
Nastavit přes 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 namísto vyvolání výjimky.

Stejně jako ostatní JavaScript objekty k objektu localStorage můžete přistupovat jako k asociativnímu poli. Místo použití metod getItem() a setItem() můžete jednoduše zadat hranaté závorky. Například tento fragment 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 smazání hodnot podle názvu klíče a také pro vymazání celého úložiště (to znamená smazání všech klíčů a hodnot najednou).

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

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

Nakonec je tu vlastnost získat celkový počet hodnot v oblasti úložiště a iterovat všechny klíče podle indexu (získá název každého klíče).

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

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

Monitorování úložného prostoru HTML5

Pokud chcete programově sledovat změny úložiště, musíte zachytit událost úložiště. K této události dochází u objektu okna, když jsou volány setItem() , removeItem() nebo clear() a něco se změní. Pokud například nastavíte existující hodnotu nebo zavoláte clear(), když nejsou k dispozici žádné klíče, událost se nespustí, protože se úložná oblast ve skutečnosti nezměnila.

Událost úložiště je podporována všude tam, kde běží objekt localStorage, včetně aplikace Internet Explorer 8. IE 8 nepodporuje standard W3C addEventListener (ačkoli bude nakonec přidán v IE 9), takže pro zachycení události úložiště musíte zkontrolovat, který modul událostí podporuje jej prohlížeč (pokud jste to již dříve provedli u jiných událostí, můžete přeskočit na konec této části). Zachycení události úložiště funguje stejně jako zachycení jiných událostí. Pokud dáváte přednost použití jQuery nebo jiného JavaScript knihovna Chcete-li zaregistrovat obslužné rutiny událostí, můžete to provést také pomocí úložiště.

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

Funkce zpětné volání handle_storage bude voláno s objektem StorageEvent, s výjimkou aplikace Internet Explorer, kde jsou události uloženy v window.event .

funkce handle_storage(e) (
if (!e) ( e = okno.událost; )
}

V tomto případě bude proměnná e objektem 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. Chcete-li zajistit maximální kompatibilitu, měli byste zkontrolovat, zda existuje vlastnost url, a pokud ne, zkontrolujte místo toho vlastnost uri.

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

Omezení v současných prohlížečích

Když jsem mluvil o historii lokálního úložiště pomocí pluginů třetích stran, zmínil jsem omezení každé techniky. Vzpomněl 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 pak je vysvětlím. Odpovědi v pořadí podle důležitosti jsou „5 megabajtů“, „QUOTA_EXCEEDED_ERR“ a „žádné“.

„5 megabajtů“ – kolik úložného prostoru je poskytováno ve výchozím nastavení. Tato hodnota je překvapivě konzistentní ve všech prohlížečích, ačkoli ve specifikaci HTML5 není uvedena jako nic jiného než návrh. Musíte pochopit, že ukládáte řetězce, nikoli data v původním formátu. Pokud ukládá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, nikoli v obvyklé reprezentaci takových čísel.

„QUOTA_EXCEEDED_ERR“ je výjimka, kterou obdržíte, pokud překročíte kvótu 5 MB. „Ne“ je odpověď na další zřejmou otázku: „Mohu uživatele požádat o více úložného prostoru? V době psaní tohoto článku prohlížeče neimplementují žádný mechanismus, který by weboví vývojáři mohli požadovat více místa pro skladování. Některé prohlížeče (jako je Opera) umožňují uživateli řídit kvóty úložiště na základě jednotlivých stránek, ale to je čistě iniciativa uživatele a nesouvisí s ničím, co jako vývojář můžete zabudovat 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 znovu k tomu, který jsme postavili v kapitole o 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 herní proces uložit lokálně, v samotném prohlížeči. Otevřete ukázku, proveďte několik pohybů, zavřete kartu prohlížeče a znovu ji otevřete. Pokud váš prohlížeč podporuje úložiště HTML5, ukázková stránka si magicky zapamatuje přesnou pozici ve hře, včetně počtu tahů, které jste provedli, pozice každé figurky na herním plánu a dokonce i vybrané figurky.

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

funkce saveGameState() (

localStorage["halma.game.in.progress"] = gGameInProgress;
for (var i = 0; i< kNumPieces; i++) {
localStorage["halma.piece." + i + ".řádek"] = gKusy[i].řádek;
localStorage["halma.piece." + i + ".sloupec"] = gPieces[i].sloupec;
}
localStorage["halma.selectedpiece"] = gSelectedPieceIndex;
localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
localStorage["halma.movecount"] = gMoveCount;
vrátit true;
}

Jak můžete vidět, objekt localStorage se používá k ukládání průběhu hry (gGameInProgress, booleovský typ). Dále jsou všechny kusy roztříděny (gPieces, pole JavaScript) a ukládá pro každý řádek a sloupec. Poté se uloží některé další herní stavy, včetně vybrané figurky (gSelectedPieceIndex, celé číslo), figurky, která je uprostřed dlouhé série skoků (gSelectedPieceHasMoved, boolean) a celkového počtu provedených tahů (gMoveCount, an celé číslo).

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

function restoreGame() (
if (!supportsLocalStorage()) ( return false; )
gGameInProgress = (localStorage["halma.game.in.progress"] == "true");
if (!gGameInProgress) ( return false; )
gPieces = new Array(kNumPieces);
for (var i = 0; i< kNumPieces; i++) {
var row = parseInt(localStorage["halma.piece." + i + ".row"]);
var column = parseInt(localStorage["halma.piece." + i + ".column"]);
gPieces[i] = new Cell(řádek, sloupec);
}
gNumPieces = kNumPieces;
gSelectedPieceIndex = parseInt(localStorage["halma.selectedpiece"]);
gSelectedPieceHasMoved = localStorage["halma.selectedpiecehasmoved"] == "true";
gMoveCount = parseInt(localStorage["halma.movecount"]);
padací deska();
vrátit 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 budu opakovat: data jsou uložena jako řetězce. Pokud ukládáte něco jiného než řetězce, budete je muset po obdržení převést. Například příznak, že probíhá hra (gGameInProgress), je typu Boolean. Ve funkci saveGameState() jej jednoduše uložíme a o datový typ se nestaráme.

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

Ale ve funkci restoreGame() se musíme podívat na hodnotu získanou z místního úložiště jako na řetězec a ručně vytvořit vlastní booleovskou hodnotu.

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

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

localStorage["halma.movecount"] = gMoveCount;

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

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

Mimo páry 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ě zdravý. Nové API byl standardizován a zahrnut do všech hlavních prohlížečů, platforem a zařízení. Pro webového vývojáře to není něco, co nevidíte každý den, že? Ale je v tom víc než „5 megabajtů párů klíč/hodnota“ a budoucnost trvalého lokálního úložiště je... jak bych to řekl... no, řekněme, že je to konkurenční vize.

Jedna vize je zkratka, kterou už znáte – SQL. V ROCE 2007 rok Google spustila Gears, plugin pro různé prohlížeče s otevřeným zdrojový kód, který obsahuje vestavěnou databázi založenou na SQLite. Tento raný prototyp později ovlivnil vytvoření specifikace webové SQL databáze. Základna Webová data SQL (dříve známý jako „WebDB“) poskytuje tenký obal kolem databáze SQL, který 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! Ó radost!

Specifikace databáze Web SQL byla implementována ve čtyřech prohlížečích a platformách.

Samozřejmě, pokud jste ve svém životě používali více než jednu databázi, víte, že „SQL“ je spíše marketingový termín než pevný a rychlý standard (někdo by mohl říkat 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 vyhovoval pouze této specifikaci. 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é. SQL funkce, takže ani říct "SQL v SQLite" nestačí. Měli byste říci „verze SQL, která je dodávána s verzí SQLite X.Y.Z“.

To vše nás přivádí k dalšímu prohlášení o vyloučení odpovědnosti, které je aktuálně uvedeno na začátku specifikace webového SQL.

Specifikace se dostala do slepé uličky: všichni zainteresovaní vývojáři používají SQL na straně serveru (SQLite), ale potřebujeme několik nezávislých implementací, abychom se posunuli směrem ke standardizaci. Zatímco ostatní vývojáři mají zájem o implementaci této specifikace, popis dialektu SQL byl ponechán jako pouhý odkaz na Sqlite, což není pro standard přijatelné.

Na tomto pozadí vám povím o další konkurenční vizi pro pokročilé, trvalé místní úložiště pro webové aplikace: Indexed Database API, dříve známé jako „WebSimpleDB“, nyní s láskou nazývané IndexedDB.

Indexed Database API poskytuje to, čemu se říká objektové úložiště, s mnoha nápady vypůjčenými z databází SQL. Existují "databáze" se "záznamy", každý záznam má určité množství„pole“. Každé pole má určitý typ data, která jsou určena při vytváření databáze. Můžete vybrat podmnožinu záznamů a poté je vypsat pomocí „kurzoru“. Změny v úložišti objektů jsou zpracovávány pomocí „transakcí“.

Pokud jste někdy programovali SQL databáze, tyto pojmy jsou vám pravděpodobně známé. Hlavní rozdíl je v tom, že objektové úložiště nemá strukturovaný jazykžádosti. Nepíšete podmínku jako "SELECT * from USERS kde AKTIVNÍ = "Y"". Místo toho používáme metody poskytované úložištěm objektů k otevření databáze USERS, k výčtu záznamů, filtrování našich záznamů a k získání hodnoty každého pole zbývajících záznamů používáme metody přístupového objektu. První prohlídka IndexedDB dobrý průvodce o tom, jak funguje IndexedDB a jak se IndexedDB srovnává s webovým SQL.

V době psaní tohoto článku byl IndexedDB implementován pouze v beta verzi Firefoxu 4. Naproti tomu Mozilla uvedla, že nikdy nebude implementovat webové SQL. Google uvedl, že zvažuje podporu IndexedDB pro Chromium a Google Chrome. A dokonce i Microsoft řekl, že IndexedDB je „skvělé řešení pro web“.

Co můžete dělat jako webový vývojář s IndexedDB? Na tento moment prakticky nic kromě ukázek techniky. V roce? Možná.