Miestne úložisko súborov cookie. Lokálny obchod. Základné operácie CRUD s lokálnym úložiskom

Prehľad webu Skladovanie

Na internete môžu byť informácie uložené na dvoch miestach: na webovom serveri a na webovom klientovi (t.j. počítači návštevníka stránky). Určité typy údajov sa najlepšie uchovávajú na jednom z týchto miest a iné typy na inom.

Správnym miestom na ukladanie citlivých a dôležitých údajov by bol webový server. Ak napríklad pridáte položky do nákupného košíka v internetovom obchode, podrobnosti o potenciálnom nákupe sa uložia na webovom serveri. Vo vašom počítači je uložených iba niekoľko bajtov sledovacích údajov, ktoré obsahujú informácie o vás (alebo skôr o vašom počítači), takže webový server vie, ktorý zásobník je váš. Ani s novými funkciami HTML5 nie je potrebné tento systém meniť – je spoľahlivý, bezpečný a efektívny.

Ukladanie údajov na server však nie je vždy najlepší prístup, pretože niekedy je jednoduchšie uložiť nepodstatné informácie v počítači používateľa. Napríklad má zmysel ukladať lokálne používateľské nastavenia (povedzme nastavenia, ktoré určujú, ako sa webová stránka zobrazuje) a stav aplikácie (snímka Aktuálny stav webová aplikácia), aby návštevník mohol neskôr pokračovať v jej spúšťaní z rovnakého miesta.

Pred HTML5 bolo jediným spôsobom lokálneho ukladania údajov použiť mechanizmus súborov. cookies, ktorý bol pôvodne navrhnutý na výmenu malého množstva identifikačných informácií medzi webovými servermi a prehliadačmi. Súbory cookie sú ideálne na ukladanie malého množstva údajov, ale JavaScriptový model na prácu s nimi je trochu neohrabaný. Systém súborov cookie tiež núti vývojára zaoberať sa dátumami vypršania platnosti a zbytočne posielať údaje tam a späť cez internet pri každej požiadavke na stránku.

HTML5 predstavuje najlepšia alternatíva cookies, čo umožňuje jednoduché a jednoduché ukladanie informácií do počítača návštevníka. Tieto informácie môžu byť uložené na klientsky počítač na dobu neurčitú, neodosielajú sa na webový server (pokiaľ to neurobí sám vývojár), môžu byť veľké a vyžadujú si prácu s niekoľkými jednoduchými, efektívnymi objektmi JavaScript.

Táto možnosť je tzv webové úložisko (Web Storage) a je obzvlášť vhodný na použitie s offline režim prácu webových stránok, pretože umožňuje vytvárať samostatné samostatné aplikácie, ktoré dokážu uložiť všetky informácie, ktoré potrebujú, aj keď nie je k dispozícii internetové pripojenie.

Funkcia webového úložiska HTML5 umožňuje webovej stránke ukladať údaje do počítača návštevníka. Tieto informácie môžu byť krátkodobé, ktoré sa vymažú po vypnutí prehliadača, alebo dlhodobé, ktoré zostávajú dostupné pri ďalších návštevách webovej stránky.

Informácie uložené vo webovom úložisku nie sú v skutočnosti uložené na internete, ale v počítači návštevníka webovej stránky. Inými slovami, webové úložisko znamená ukladanie údajov nie na internete, ale ukladanie údajov z internetu.

Existujú dva typy webového úložiska, ktoré tak či onak súvisia s dvomi objektmi:

Používa objekt lokálny obchod na ukladanie údajov pre celú webovú stránku trvalý základ. To znamená, že ak webová stránka ukladá údaje do lokálneho úložiska, tieto údaje budú používateľovi k dispozícii, keď sa na danú webovú stránku vráti nasledujúci deň, týždeň alebo rok.

Väčšina prehliadačov samozrejme poskytuje používateľovi aj možnosť vymazať lokálne úložisko. V niektorých prehliadačoch sa implementuje ako stratégia všetko alebo nič a odstraňuje všetky miestne údaje, podobne ako sa odstraňujú súbory cookie. (V niektorých prehliadačoch sú systém cookies a miestne úložisko prepojené, takže jediný spôsob, ako odstrániť miestne údaje, je vymazať súbory cookie.) A iné prehliadače môžu používateľovi poskytnúť možnosť zobraziť údaje pre každú jednotlivú webovú stránku a odstrániť údaje pre vybranú lokalitu alebo lokality.

Používa objekt sessionStorage na dočasné ukladanie údajov pre jedno okno alebo kartu prehliadača. Tieto údaje sú dostupné len dovtedy, kým používateľ nezavrie okno alebo kartu, kedy sa relácia skončí a údaje sa vymažú. Údaje o relácii sa však zachovajú, ak používateľ prejde na inú webovú stránku a potom sa vráti, pokiaľ sa tak stane v rovnakom okne prehliadača.

Z pohľadu kódu webovej stránky funguje lokálne úložisko aj úložisko dát relácie úplne rovnako. Rozdiel je len v dĺžke uchovávania údajov.

Použitie lokálneho úložiska poskytuje najlepšiu príležitosť na uloženie požadovaných informácií pre následné návštevy webovej stránky používateľom. A úložisko relácií sa používa na ukladanie údajov, ktoré je potrebné preniesť z jednej stránky na druhú. (Ukladací priestor relácie môže tiež ukladať dočasné údaje použité iba na jednej stránke, ale normálne premenné JavaScriptu na tento účel fungujú dobre.)

Lokálne úložisko aj úložisko relácie sú spojené s doménou webovej lokality. Ak teda uložíte údaje pre stránku www..html do lokálneho úložiska, tieto údaje budú dostupné pre stránku www.html, pretože obe tieto stránky majú rovnakú doménu. Tieto údaje však nebudú dostupné pre stránky iných domén.

Okrem toho od r webové úložisko sa nachádza v počítači (resp mobilné zariadenie) tohto používateľa, je priradený k tomuto počítaču a webová stránka sa otvorila na tento počítač a ukladá údaje do svojho lokálneho úložiska, nemá prístup k informáciám, ktoré má uložené na inom počítači. Podobne webová stránka vytvorí samostatné lokálne úložisko, ak sa prihlásite pomocou iného používateľského mena alebo spustíte iný prehliadač.

Hoci špecifikácia HTML5 nestanovuje žiadne prísne pravidlá týkajúce sa maximálneho úložného priestoru, väčšina prehliadačov ho obmedzuje na 5 MB. Do tohto množstva sa dá vtesnať množstvo dát, ale nebude to stačiť, ak chcete na optimalizáciu výkonu využívať lokálne úložisko a do neho ukladať veľké obrázky či videá (a pravdupovediac, lokálne úložisko na to nie je určené účely).

Pre ukladanie veľkého množstva dát, stále sa vyvíjajúci databázový štandard IndexovanáDB umožňuje oveľa väčšie miestne úložisko – zvyčajne 50 MB na začiatok a viac, ak s tým používateľ súhlasí.

Ukladanie dát

Pred umiestnením informácie do lokálneho úložiska alebo úložiska relácie je potrebné jej priradiť popisný názov. Tento názov sa nazýva kľúč (kľúč) a je potrebný na to, aby sa údaje dali v budúcnosti získať.

Syntax na uloženie časti údajov je nasledovná:

localStorage = dáta;

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

Ukladanie časti statického textu samozrejme nemá zmysel. Spravidla potrebujeme uchovávať nejaké premenlivé údaje, ako napríklad aktuálny dátum, výsledok matematického výpočtu alebo textové údaje zadané používateľom do polí formulára. Nasleduje príklad ukladania textových údajov zadaných používateľom:

Funkcia saveData() ( // Získanie hodnôt textového poľa var localData = document.getElementById("localData"). hodnota; var sessionData = document. getElementById("sessionData"). value; // Uloženie textu zadaného v textové pole do lokálneho úložiska localStorage["localData"] = localData; // Uloženie textu zadaného do textového poľa do úložiska relácie sessionStorage["sessionData"] = sessionData; ) funkcia loadData() ( // Načítanie uložených údajov z the storages var localData = localStorage ["localData"]; var sessionData = sessionStorage["sessionData"]; // Zobrazte tieto údaje v textových poliach if (localData != null) ( document.getElementById("localData").value = localData ; ) if (sessionData ! = null) ( document.getElementById("sessionData").value = sessionData; ) )

Stránka obsahuje dve textové polia: jedno pre lokálny ukladací priestor (hore) a jedno pre ukladanie relácie (dole). Kliknutím na tlačidlo „Uložiť“ uložíte text zadaný do textových polí a kliknutím na tlačidlo „Načítať“ sa v poliach zobrazia príslušné uložené údaje.

Web Storage podporuje aj menej bežnú syntax vlastností. Podľa pravidiel tejto syntaxe označujeme miesto úložiska s názvom username ako localStorage.username, nie localStorage["username"]. Oba typy syntaxe sú ekvivalentné a použitie jedného alebo druhého je vecou osobných preferencií.

Webové úložisko nefunguje bez webového servera

Pri prieskume webového úložiska môžete naraziť na neočakávaný problém. V mnohých prehliadačoch webové úložisko funguje iba pre stránky poskytované webovým serverom. Nezáleží na tom, kde sa server nachádza, na internete alebo na vašom vlastnom počítači, najdôležitejšie je, aby sa stránky nespúšťali z lokálneho pevný disk(napríklad dvojitým kliknutím na ikonu súboru stránky).

Táto funkcia je vedľajším efektom spôsobu, akým prehliadače prideľujú priestor lokálnemu úložisku. Ako už bolo spomenuté, prehliadače obmedzujú miestne úložisko na 5 MB, čo od nich vyžaduje, aby priradili každú stránku, ktorá chce používať miestne úložisko, s doménou webovej lokality.

Čo sa teda stane, ak otvoríte stránku, ktorá využíva webové úložisko z vášho lokálneho pevného disku? Všetko závisí od prehliadača. internetový prehliadač Zdá sa, že Explorer úplne stráca podporu webového úložiska. Objekty localStorage a sessionStorage zmiznú a pokus o ich použitie spôsobí chybu JavaScript.

AT prehliadač Firefox objekty localStorage a sessionStorage zostávajú na mieste a zdajú sa byť podporované (dokonca aj Modernizr určuje, čo je podporované), ale všetko, čo sa odošle do úložiska, zmizne, nikto nevie kam. AT Prehliadač Chrome opäť niečo iné – väčšina funkcií webového úložiska funguje tak, ako by mala, ale niektoré funkcie (napríklad udalosť onStorage) nefungujú.

Podobné problémy vznikajú pri použití File API. Preto si ušetríte veľa problémov, ak testovanú stránku umiestnite na testovací server, aby ste sa vyhli všetkým týmto neistotám.

Podpora webového úložiska prehliadačmi

Webové úložisko je jednou z najviac podporovaných funkcií HTML5 s dobrou úrovňou podpory v každom väčšom prehliadači. V tabuľke nižšie sú uvedené minimálne verzie hlavných prehliadačov, ktoré podporujú webové úložisko:

Všetky tieto prehliadače poskytujú lokálne úložisko a ukladanie údajov relácie. Podpora udalosti onStorage však vyžaduje novšie prehliadače, ako napríklad IE 9, Firefox 4 alebo Chrome 6.

Najproblematickejšou verziou je IE 7, ktorá vôbec nepodporuje webové úložisko. Ako riešenie môžete emulovať webové úložisko pomocou súborov cookie. Nie je to úplne ideálne riešenie, ale funguje. Aj keď neexistuje žiadny oficiálny skript, ktorý by túto medzeru odstránil, niekoľko dobrých východiskových bodov možno nájsť na stránke HTML5 Cross Browser (v časti „Web Storage“).

The Web Storage API poskytuje mechanizmy, pomocou ktorých môžu prehliadače ukladať páry kľúč/hodnota oveľa intuitívnejším spôsobom ako pri používaní súborov cookie .

Koncepty a využitie webového úložiska

Dva mechanizmy v rámci Web Storage sú nasledovné:

• sessionStorage udržiava samostatný úložný priestor pre každý daný pôvod, ktorý je k dispozícii počas trvania relácie stránky (pokiaľ je otvorený prehliadač, vrátane opätovného načítania a obnovenia stránky)
  • Ukladá údaje iba pre reláciu, čo znamená, že údaje sú uložené, kým sa prehliadač (alebo karta) nezavrie.
  • Údaje sa nikdy neprenášajú na server.
  • Limit úložiska je väčší ako súbor cookie (najviac 5 MB).
• localStorage robí to isté, ale pretrváva, aj keď je prehliadač zatvorený a znova otvorený.
  • Ukladá údaje bez dátumu vypršania platnosti a vymaže sa iba prostredníctvom JavaScriptu alebo vymazaním vyrovnávacej pamäte prehliadača / lokálne uložených údajov.
  • Limit úložiska je maximum spomedzi troch.

technické údaje

Kompatibilita prehliadača

Window.localStorage

https://github.com/mdn/browser-compat-data a pošlite nám žiadosť o stiahnutie.

Legenda

Window.sessionStorage

Tabuľka kompatibility na tejto stránke je vygenerovaná zo štruktúrovaných údajov. Ak by ste chceli prispieť k údajom, pozrite si https://github.com/mdn/browser-compat-data a pošlite nám žiadosť o stiahnutie.

Aktualizujte údaje o kompatibilite na GitHub

Legenda

Súkromné ​​prehliadanie / režimy inkognito

Väčšina moderných prehliadačov podporuje možnosť ochrany osobných údajov nazvanú „Inkognito“, „Súkromné ​​prehliadanie“ alebo niečo podobné, ktoré neukladá údaje, ako je história a súbory cookie. Táto možnosť je zo zrejmých dôvodov zásadne nekompatibilná s webovým úložiskom. Dodávatelia prehliadačov preto experimentujú s rôznymi scenáre, ako riešiť túto nekompatibilitu.

Väčšina prehliadačov sa rozhodla pre stratégiu, kde sú API úložiska stále dostupné a zdanlivo plne funkčné, s jedným veľkým rozdielom, že všetky uložené dáta sa po zatvorení prehliadača vymažú. Pre tieto prehliadače stále existujú rôzne interpretácie toho, čo by sa malo robiť s existujúcimi uloženými údajmi (z bežnej relácie prehliadania). Mala by byť dostupná na čítanie v súkromnom režime? Potom sú tu niektoré prehliadače, najmä Safari, ktoré sa rozhodli pre riešenie, kde je úložisko k dispozícii, ale je prázdne a má pridelenú kvótu 0 bajtov, čo v skutočnosti znemožňuje zapisovanie údajov do neho.

Vývojári by si mali byť vedomí týchto rôznych implementácií a mali by ich brať do úvahy pri vývoji webových stránok závislých od rozhraní API webového úložiska. Pre viac informácií si prosím pozrite tento blogový príspevok WHATWG, ktorý sa konkrétne zaoberá touto témou.

Preklad: Vlad Merževič

Trvalé lokálne úložisko je jednou z oblastí, kde majú klientske aplikácie výhody oproti serverovým aplikáciám. Pre aplikácie ako operačný systém, poskytuje vrstvu abstrakcie na ukladanie a získavanie údajov, ako sú nastavenia alebo stav vykonávania. Tieto hodnoty môžu byť uložené v registri, súboroch INI, súboroch XML alebo inde, v závislosti od princípov platformy. Ak vaša klientska aplikácia potrebuje lokálne úložisko pre viac ako len pár kľúč/hodnota, môžete vložiť vlastnú databázu, prísť s vlastným formátom súborov alebo ľubovoľným množstvom iných riešení.

Historicky webové aplikácie nemali žiadny z týchto luxusov. Súbory cookie boli vynájdené na začiatku histórie internetu a možno ich použiť na trvalé lokálne uloženie malého množstva údajov. Majú však tri potenciálne nevýhody:

• cookies sú súčasťou každej požiadavky HTTP, čím spomaľujú vašu webovú aplikáciu zbytočným posielaním tých istých údajov znova a znova;
• cookies sú zahrnuté v každej HTTP požiadavke, keď sú dáta prenášané cez internet v nešifrovanej forme (aj keď je celá webová aplikácia prenášaná cez SSL);
• súbory cookie sú obmedzené na približne 4 KB údajov – dosť na spomalenie vašej aplikácie (pozri vyššie), ale nie dosť na to, aby boli užitočné.

Tu je to, čo naozaj chceme:

• dostatok úložného priestoru;
• práca na strane klienta;
• zvážiť obnovenie stránky;
• žiadne odosielanie na server.

Pred HTML5 všetky pokusy o dosiahnutie tohto cieľa skončili rôznymi spôsobmi neúspešnými.

Stručná história miestneho úložiska pred HTML5

Na začiatku bol iba jeden Internet Explorer. Microsoft aspoň chcel, aby si to svet myslel. Za týmto účelom, ako súčasť prvej veľkej vojny prehliadačov, Microsoft vynašiel veľa vecí a zahrnul ich do svojho prehliadača Internet Explorer, ktorým sa vojna skončila. Jedna z týchto vecí bola nazvaná DHTML Behaviors a jedno zo správania sa nazýva userData.

UserData umožňuje webovej stránke uložiť až 64 KB údajov na doménu v hierarchickej štruktúre podobnej XML. Dôveryhodné domény, ako sú intranetové stránky, môžu uložiť desaťkrát viac. A hej, 640kb by malo stačiť každému. IE neposkytol žiadny spôsob, ako zmeniť tieto konvencie, takže neexistuje spôsob, ako zvýšiť dostupnú pamäť.

V roku 2002 spoločnosť Adobe predstavila vo Flash 6 funkciu, ktorá nebola úspešná a mala zavádzajúci názov „Flash cookies“. AT Flash prostredie táto schopnosť je presnejšie známa ako lokálne zdieľané objekty (lokálne prístupné objekty, LSO). Stručne povedané, umožňuje Flash objektom uložiť až 100 KB údajov na doménu. Brad Neuberg vyvinul skorý prototyp mosta medzi Flashom a JavaScriptom, ktorý sa nazýval AMASS (AJAX Massive Storage System), ale bol obmedzený niektorými dizajnovými vtipmi Flash. Do roku 2006, s príchodom ExternalInterface vo Flash 8, sa prístup k LSO cez JavaScript stal rádovo jednoduchším a rýchlejším. Brad prepísal AMASS a integroval ho do populárneho Dojo Toolkit pod alias dojox.storage. Flash „zadarmo“ dáva každej doméne 100 kb úložného priestoru. Okrem toho vyzve používateľa, aby na požiadanie zvýšil veľkosť úložiska o rádovú hodnotu (1 MB, 10 MB atď.).

if (Modernizr.localstorage) (
// window.localStorage je k dispozícii!
) inak (
// žiadna vstavaná podpora pre úložisko HTML5
}

Používanie úložiska HTML5

Úložisko HTML5 je založené na názvoch párov kľúč/hodnota. Informácie ukladáte na základe názvu kľúča a potom môžete tieto údaje získať pomocou rovnakého kľúča. Názov kľúča je reťazec. Údaje môžu byť ľubovoľného typu, ktorý podporuje JavaScript, vrátane reťazcov, boolovských hodnôt, celých čísel alebo čísel s pohyblivou rádovou čiarkou. Údaje sú však v skutočnosti uložené ako reťazec. Ak ukladáte a získavate iné ako reťazce, budete musieť použiť funkcie ako parseInt() alebo parseFloat() na preklad prijatých údajov do správnych typov JavaScriptu.

Rozhranie úložiska (
Získať cez getItem(key);
Nastaviť cez setItem(key, data);
};

Volanie setItem() s existujúcim názvom kľúča ticho prepíše predchádzajúcu hodnotu. Volanie getItem() s neexistujúcim kľúčom vráti NULL namiesto toho, aby vyvolalo výnimku.

Rovnako ako ostatné objekty JavaScript, môžete pristupovať k objektu localStorage ako asociatívne pole. Namiesto použitia metód getItem() a setItem() môžete použiť iba hranaté zátvorky. Napríklad tento kúsok kódu

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

možno prepísať pomocou syntaxe hranatých zátvoriek:

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

Existujú aj metódy na odstránenie hodnôt podľa názvu kľúča, ako aj na vymazanie celého úložiska (to znamená odstránenie všetkých kľúčov a hodnôt naraz).

Rozhranie úložiska (
Odstrániť cez removeItem(key);
jasný();
}

Volanie removeItem() s kľúčom, ktorý neexistuje, nevráti nič.

Nakoniec je tu vlastnosť získať celkový počet hodnôt v úložnej oblasti a iterovať všetky kľúče podľa indexu (získa názov každého kľúča).

Rozhranie úložiska (
dĺžka
Get key (nezáporné celé číslo);
}

Ak pri volaní key() index nie je v rozsahu od 0 do (dĺžka-1), funkcia vráti hodnotu null .

Sledovanie úložného priestoru HTML5

Ak chcete programovo sledovať zmeny úložiska, musíte zachytiť udalosť úložiska. Táto udalosť sa vyvolá na objekte okna, keď sa zavolá setItem() , removeItem() alebo clear() a niečo zmení. Napríklad, ak nastavíte existujúcu hodnotu alebo zavolajte clear(), keď neexistujú žiadne kľúče, potom sa udalosť nespustí, pretože úložná oblasť sa v skutočnosti nezmenila.

Udalosť úložiska je podporovaná všade tam, kde je spustený objekt localStorage, vrátane prehliadača Internet Explorer 8. IE 8 nepodporuje štandard W3C addEventListener (hoci bude nakoniec pridaný v IE 9), takže ak chcete zachytiť udalosť úložiska, musíte skontrolovať, ktorý nástroj udalostí, ktorý podporuje prehliadač (ak ste to už urobili s inými udalosťami, môžete túto časť preskočiť na koniec). Zachytenie udalosti úložiska funguje rovnakým spôsobom ako zachytenie iných udalostí. Ak uprednostňujete používanie jQuery alebo inej knižnice JavaScriptu na registráciu obslužných programov udalostí, môžete to urobiť aj pomocou úložiska.

if (window.addEventListener) (
window.addEventListener("úložisko", handle_storage, false);
) inak (
window.attachEvent("onstorage", handle_storage);
};

Spätné volanie handle_storage sa zavolá s objektom StorageEvent, s výnimkou Internet Explorera, kde sú udalosti uložené v window.event .

funkcia handle_storage(e) (
if (!e) ( e = okno.udalosť; )
}

V tomto prípade bude premenná e objekt StorageEvent, ktorý má nasledujúce užitočné vlastnosti.

*Poznámka: Vlastnosť url sa pôvodne volala uri a niektoré prehliadače túto vlastnosť podporovali pred zmenou špecifikácie. Pre maximálnu kompatibilitu by ste mali skontrolovať, či existuje vlastnosť url, a ak nie, skontrolujte radšej vlastnosť uri.

Udalosť úložiska sa nedá zrušiť, vo vnútri spätného volania handle_storage nie je žiadny spôsob, ako zastaviť zmenu. Je to len spôsob, akým vám prehliadač hovorí: „Hej, práve sa to stalo. Nedá sa nič robiť, len som chcel, aby si to vedel."

Obmedzenia v súčasných prehliadačoch

Keď už hovoríme o histórii lokálneho ukladania pomocou doplnkov tretích strán, spomenul som obmedzenia každej techniky. Spomenul som si, že som nepovedal nič o obmedzeniach dnes už štandardného úložiska HTML5. Dám vám odpovede a potom ich vysvetlím. Odpovede zoradené podľa dôležitosti sú: "5 megabajtov", "QUOTA_EXCEEDED_ERR" a "žiadne".

"5 megabajtov" - koľko úložného priestoru je štandardne dané. Táto hodnota je prekvapivo rovnaká vo všetkých prehliadačoch, aj keď nie je formulovaná ako nič iné ako návrh v špecifikácii HTML5. Musíte pochopiť, že ukladáte reťazce, nie údaje v ich pôvodnom formáte. Ak uložíte veľa celých čísel alebo čísel s pohyblivou rádovou čiarkou, rozdiel v reprezentácii môže byť veľký. Každá číslica v čísle s pohyblivou rádovou čiarkou je uložená ako znak, nie v obvyklom znázornení pre takéto čísla.

„QUOTA_EXCEEDED_ERR“ je výnimka, ktorú získate, ak prekročíte kvótu 5 MB. „Nie“ je odpoveď na ďalšiu zrejmú otázku: „Môžem používateľa požiadať o viac úložného priestoru?“. V čase písania tohto článku prehliadače neimplementujú žiadny mechanizmus, pomocou ktorého by vývojári webu mohli požadovať viac úložného priestoru. Niektoré prehliadače (ako napríklad Opera) umožňujú používateľovi kontrolovať kvóty úložiska pre jednotlivé stránky, ale to je čisto z iniciatívy používateľa a nesúvisí to s tým, čo môžete ako vývojár zabudovať do svojej webovej aplikácie.

Úložisko HTML5 v akcii

Poďme sa pozrieť na úložisko HTML5 v akcii. Vráťme sa k tomu, ktorý sme postavili v kapitole kresby. V tejto hre je malý problém: ak zatvoríte okno prehliadača uprostred hry, stratíte výsledky. Ale s úložiskom HTML5 môžeme hru uložiť na miesto, v samotnom prehliadači. Otvorte ukážku, urobte niekoľko pohybov, zatvorte kartu prehliadača a potom ju znova otvorte. Ak váš prehliadač podporuje ukladanie HTML5, demo stránka si magicky zapamätá vašu presnú pozíciu v hre, vrátane toho, koľko ťahov ste urobili, pozície každej figúrky na hracej ploche a dokonca aj vybranú figúrku.

Ako to funguje? Zakaždým, keď dôjde k zmene v hre, zavoláme túto funkciu.

funkcia saveGameState() (

localStorage["halma.game.in.progress"] = gGameInProgress;
pre (var i = 0; i< kNumPieces; i++) {
localStorage["halma.piece." + i + ".riadok"] = gPieces[i].riadok;
localStorage["halma.piece." + i + ".stĺpec"] = gKusy[i].stĺpec;
}
localStorage["halma.selectedpiece"] = gSelectedPieceIndex;
localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
localStorage["halma.movecount"] = gMoveCount;
vrátiť true;
}

Ako vidíte, objekt localStorage sa používa na uloženie priebehu hry (gGameInProgress , boolean). Ďalej iteruje všetky čipy (gPieces, pole JavaScript) a pre každý z nich uloží riadok a stĺpec. Potom sa uložia niektoré ďalšie stavy hry, vrátane aktuálne vybranej figúry (gSelectedPieceIndex, celé číslo), figúry, ktorá je uprostred dlhej série skokov (gSelectedPieceHasMoved, boolean) a celkový počet vykonané pohyby (gMoveCount , celé číslo).

Keď sa stránka načíta, namiesto automatického volania funkcie newGame(), ktorá by vrátila všetky premenné na pôvodné hodnoty, zavoláme restoreGame() . Funkcia continueGame() používa obchod HTML5 na kontrolu stavu hry v miestnom obchode. Ak je prítomný, obnoví hodnoty pomocou objektu localStorage.

function restoreGame() (
if (!supportsLocalStorage()) ( return false; )
gGameInProgress = (localStorage["halma.game.in.progress"] == "true");
if (!gGameInProgress) ( return false; )
gPieces = new Array(kNumPieces);
pre (var i = 0; i< kNumPieces; i++) {
var riadok = parseInt(localStorage["halma.piece." + i + ".riadok"]);
var column = parseInt(localStorage["halma.piece." + i + ".stĺpec"]);
gPieces[i] = new Cell(riadok, stĺpec);
}
gNumPieces = kNumPieces;
gSelectedPieceIndex = parseInt(localStorage["halma.selectedpiece"]);
gSelectedPieceHasMoved = localStorage["halma.selectedpiecehasmoved"] == "true";
gMoveCount = parseInt(localStorage["halma.movecount"]);
doska ();
vrátiť true;
}

Najdôležitejšou časťou tejto funkcie je upozornenie, ktoré som spomenul už skôr v tejto kapitole a tu sa zopakujem: údaje sú uložené ako reťazce. Ak ukladáte niečo iné ako reťazce, budete ich musieť previesť, keď ich získate. Napríklad príznak prebiehajúcej hry (gGameInProgress ) je boolovský. Vo funkcii saveGameState() ho iba uložíme a o typ údajov sa nestaráme.

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

Ale vo funkcii continueGame() musíme považovať hodnotu získanú z lokálneho úložiska za reťazec a manuálne zostaviť vlastnú boolovskú hodnotu.

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

Podobne je počet ťahov uložený v gMoveCount ako celé číslo, vo funkcii saveGameState() ho jednoducho uložíme.

localStorage["halma.movecount"] = gMoveCount;

Ale vo funkcii restoreGame() musíme previesť hodnotu na celé číslo pomocou vstavanej funkcie parseInt() JavaScriptu.

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

Mimo páru kľúč/hodnota: Konkurenčná vízia

Aj keď v histórii bolo veľa trikov a riešení, súčasný stav úložiska HTML5 je prekvapivo bezpečný. Nové API bolo štandardizované a zahrnuté vo všetkých hlavných prehliadačoch, platformách a zariadeniach. Pre webového vývojára to nevidíte každý deň, však? Ale je to viac ako „5 megabajtov párov kľúč/hodnota“ a budúcnosť trvalého lokálneho úložiska je... ako to povedať... no, konkurenčná vízia.

Jednou víziou je skratka, ktorú už poznáte – SQL. V roku 2007 Google spustil Gears, open source doplnok pre rôzne prehliadače, ktorý obsahuje vstavanú databázu založenú na SQLite. Tento skorý prototyp neskôr ovplyvnil vytvorenie špecifikácie webovej SQL databázy. Webová databáza SQL (predtým známa ako „WebDB“) poskytuje okolo databázy tenký obal SQL dáta, ktorý vám umožňuje vykonávať z JavaScriptu nasledujúce veci:

openDatabase("dokumenty", "1.0", "Miestne ukladanie dokumentov", 5*1024*1024, funkcia (db) (
db.changeVersion("", "1.0", funkcia (t) (
t.executeSql("VYTVORIŤ TABUĽKU docids (id, meno)");
), chyba);
});

Ako vidíte, väčšina akcií je v súlade s metódou ExecuteSQL. Tento reťazec môže podporovať akýkoľvek príkaz SQL vrátane SELECT, UPDATE, INSERT a DELETE. Je to tak programovanie servera databázy, okrem toho, že to robíte pomocou JavaScriptu! Ó radosť!

Špecifikácia databázy Web SQL bola implementovaná v štyroch prehliadačoch a platformách.

Samozrejme, ak ste vo svojom živote používali viacero databáz, potom viete, že „SQL“ je skôr marketingový pojem ako tvrdý a rýchly štandard (to isté by sa dalo povedať o HTML5, ale to nie je dôležité). Samozrejme, existuje skutočná špecifikácia SQL (nazýva sa SQL-92), ale na svete neexistuje žiadny databázový server, ktorý by vyhovoval iba tejto špecifikácii. Existuje Oracle SQL, Microsoft SQL, SQL v MySQL, SQL v PostgreSQL, SQL v SQLite. V skutočnosti každý z týchto produktov pridáva v priebehu času nové funkcie SQL, takže nestačí povedať len „SQL v SQLite“. Mali by ste povedať „verzia SQL, ktorá sa dodáva s verziou SQLite X.Y.Z“.

Toto všetko nás privádza k ďalšiemu varovaniu, ktoré sa momentálne nachádza v hornej časti špecifikácie Web SQL.

Špecifikácia sa dostala do slepej uličky: všetci zainteresovaní vývojári používajú SQL (SQLite) na strane servera, ale potrebujeme niekoľko nezávislých implementácií, aby sme sa posunuli po ceste štandardizácie. Zatiaľ čo iní vývojári majú záujem o implementáciu tejto špecifikácie, popis dialektu SQL bol ponechaný len ako odkaz na Sqlite, ktorý štandard neakceptuje.

Na tomto pozadí vám poviem o ďalšej konkurenčnej vízii pokročilého, trvalého lokálneho úložiska pre webové aplikácie: API indexovanej databázy, predtým známe ako „WebSimpleDB“, teraz s láskou označované ako IndexedDB.

Rozhranie API indexovanej databázy poskytuje to, čo sa nazýva sklad objektov, s mnohými nápadmi vypožičanými z databáz SQL. Existujú „databázy“ so „záznammi“, každý záznam má určitý počet „polí“. Každé pole má špecifický typ údajov, ktorý je definovaný pri vytváraní databázy. Môžete vybrať časť záznamov a potom ich zobraziť pomocou „kurzora“. Zmeny v sklade objektov sa spracúvajú pomocou „transakcií“.

Ak ste niekedy programovali SQL databázy, tieto výrazy sú vám pravdepodobne známe. Hlavným rozdielom je, že ukladanie objektov nemá štruktúrovaný jazyk dotazov. Nepíšete podmienku ako "SELECT * from USERS kde AKTÍVNE = "Y"". Namiesto toho používame metódy, ktoré poskytuje úložisko objektov, na otvorenie databázy POUŽÍVATEĽOV, vymenovanie záznamov, filtrovanie našich záznamov a použitie prístupových metód na získanie hodnoty každého poľa zostávajúcich záznamov. Skorý prehľad IndexedDB je dobrým sprievodcom, ako funguje IndexedDB a ako sa IndexedDB porovnáva s webovým SQL.

V čase písania tohto článku bola IndexedDB implementovaná iba v beta verzii Firefoxu 4. Na rozdiel od toho Mozilla uviedla, že nikdy nebude implementovať Web SQL. Google uviedol, že zvažuje podporu IndexedDB pre Chromium a Google Chrome. A dokonca aj Microsoft povedal, že IndexedDB je „skvelé riešenie pre web“.

Čo môžete ako webový vývojár robiť s IndexedDB? Momentálne takmer nič, až na nejaké technologické ukážky. V roku? Možno.

Posledná aktualizácia: 1.11.2015

Hoci cookies umožňujú ukladanie informácií, majú množstvo obmedzení. Prehliadač má napríklad obmedzenia týkajúce sa veľkosti súborov cookie - každý súbor cookie nemôže presiahnuť 4 kb. Cookies majú dátum vypršania platnosti, po ktorom sú vymazané. Cookies sú neoddeliteľnou súčasťou protokolu HTTP a sú prenášané pri každej požiadavke na server spolu s požiadavkou na server. Na prácu so súbormi cookie na strane klienta v kóde javascript však nezáleží na odovzdávaní súborov cookie na server. Okrem toho, ak chcete získať uložené súbory cookie, musíte napísať nejaký kód.

Preto sa zaviedlo HTML5 nový koncept na ukladanie dát – webové úložisko. Webové úložisko pozostáva z dvoch komponentov: úložisko relácie a lokálne úložisko.

Úložisko relácie je dočasné úložisko informácií, ktoré sa po zatvorení prehliadača odstráni.

Lokálne úložisko predstavuje úložisko dát na priebežnej báze. Údaje z lokálneho úložiska sa automaticky nevymažú a nevyprší ich platnosť. Tieto údaje sa neposielajú na server v požiadavke HTTP. Okrem toho je množstvo lokálneho úložiska v prehliadačoch Chrome a Firefox 5 Mb pre doménu a v IE - 10 Mb.

Všetky údaje vo webovom úložisku sú množinou párov kľúč – hodnota. To znamená, že každý objekt má jedinečný názov kľúča a špecifickú hodnotu.

Na prácu s lokálnym úložiskom v javascripte sa používa objekt localStorage a na prácu s úložiskom relácie sa používa objekt sessionStorage.

Ak chcete uložiť údaje, odovzdajte ich metóde setItem() objektu localStorage:

LocalStorage.setItem("login", " [e-mail chránený]");

Do tejto metódy sa prenášajú dve hodnoty: kľúč a hodnota objektu, ktorý sa má uložiť.

Ak localStorage už má objekt s kľúčom "login", jeho hodnota sa nahradí novou.

Ak chcete získať uložené údaje, musíte zavolať metódu getItem():

var login = localStorage.getItem("login"); // [e-mail chránený]

Tejto metóde sa odovzdá kľúč objektu.

Na odstránenie objektu použite metódu removeItem(), ktorá prevezme kľúč objektu, ktorý sa má odstrániť:

LocalStorage.removeItem("prihlásenie");

A pre úplné odstránenie zo všetkých objektov z localStorage môžete použiť metódu clear():

LocalStorage.clear();

Ukladanie jednoduchých objektov je jednoduché, ale majte na pamäti, že údaje v localStorage sú uložené ako reťazec:

LocalStorage.setItem("vek", 23); var vek = localStorage.getItem("vek"); vek=parseInt(vek)+10; dokument.písať(vek); //33

Ak sa v tomto prípade hodnota neprevedie na číslo pomocou parseInt() , vek bude fungovať ako reťazec.

Pri ukladaní zložitých objektov môžu nastať problémy:

Var user =( meno: "Tom", vek: 23, vydatá: false ); localStorage.setItem("user", user); var saveUser = localStorage.getItem("user"); document.write(savedUser); // document.write(savedUser.name); // undefined - SaveUser je reťazec, nie objekt

V tomto prípade musíme použiť serializáciu JSON:

Var user =( meno: "Tom", vek: 23, vydatá: false ); localStorage.setItem("user", JSON.stringify(user)); var saveUser = JSON.parse(localStorage.getItem("user")); document.write(uloženéPoužívateľ.meno + " " + uloženéPoužívateľ.vek +" " + uloženýPoužívateľ.ženatý); // Tom 23 nepravda