Je to celkom štandardný HTML kontajner a s naším JavaScriptom ho môžeme naplniť dynamickým obsahom.

Keďže v tomto príklade použijeme jQuery, budete ho musieť zahrnúť aj do dokumentu HTML.

JavaScript

Ak uvažujeme o štruktúre jednoduchej aplikácie „zoznam úloh“, prvá vec, ktorú musíme urobiť, je skontrolovať, či má vstup prázdnu hodnotu, keď používateľ klikne na tlačidlo „pridať“ alebo „skontrolovať“:

$("#add").click(function() ( var Description = $("#description").val(); //ak je úloha prázdna if($("#description").val( ) == "") ( $("#alert").html(" POZOR!Úlohu ste nechali prázdnu"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )

Všetko, čo sme urobili, bolo otestovať kliknutie na tlačidlo Pridať a spustiť jednoduchý test, aby sme zistili, či používateľ niečím vyplnil vstup. Ak nie, zobrazí sa výstražný prvok, ktorý zostane 1000 ms a potom zmizne.

Ďalšia vec, ktorú musíme urobiť, je vložiť položku zoznamu s hodnotou do vstupného riadku a predpíšeme to tak, že keď používateľ pridá úlohu, vždy sa presunie na začiatok zoznamu a potom uloží zoznam položky v miestnom úložisku, takto:

// pridanie položky zoznamu $("#todos").prepend("

Ako vidíte, toto je celkom štandardný jQuery a pokiaľ ide o lokálne úložisko, musíme uložiť kľúč a hodnotu. Kľúčom je názov, ktorý si dáme, v tomto prípade ho nazveme len „Todos“, potom musíme definovať, čo chceme uložiť, čo je v tomto prípade všetko HTML, ktoré sa nachádza vo vnútri zoznamu úloh v neusporiadanom zozname. Ako vidíte, všetko sme zachytili pomocou jQuery a nakoniec sme vrátili „false“ (false), aby sa formulár nevzdal a naša stránka sa neobnovovala.

Naším ďalším krokom je skontrolovať, či máme niečo uložené lokálne. Ak existuje, musíme ho umiestniť na stránku, keďže sme dali nášmu kľúču názov „todos“, musíme skontrolovať jeho existenciu. Páči sa ti to:

// ak máme niečo na miestnom úložisku, že if(localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )

Ak našu aplikáciu otestujete a stránku znova načítate, uvidíte, že už funguje. Jediné, čo musíme urobiť, je vytvoriť funkciu, ktorá bude zodpovedná za vymazanie celého zoznamu. Vymažeme celý lokálny ukladací priestor, znova načítame stránku, aby sa naša zmena prejavila, a potom vrátime hodnotu „false“, aby sme zabránili hashovaniu pred adresou URL, ako je tento:

// vymaže celý lokálny úložný priestor $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));

Úplný kód nasledovne:

$("#add").click(function() ( var Description = $("#description").val(); if($("#description").val() == "") ( $( "#alert").html(" POZOR!Úlohu ste nechali prázdnu"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("

Podpora prehliadača

Podpora webového úložiska je pre špecifikáciu HTML5 celkom dobrá, podporujú ju všetky hlavné prehliadače a dokonca aj IE8.

Súbory cookie, o ktorých sme hovorili v predchádzajúcom návode, sú veľmi obmedzené: jeden súbor cookie môže mať iba 4096 znakov a počet súborov cookie na doménu môže byť približne 30 – 50 v závislosti od prehliadača. Preto, bohužiaľ, nebude tam možné uložiť veľa informácií. Tak sa to historicky stalo.

Na obídenie tohto obmedzenia majú prehliadače alternatívu k súborom cookie – nazýva sa to lokálne úložisko. V lokálnom úložisku môžeme dlhodobo uchovávať 5-10 megabajtov informácií alebo aj viac.

Práca s lokálnym úložiskom

Na prácu s lokálnym úložiskom je určený objekt localStorage zabudovaný do prehliadača. Má 4 ľahko pochopiteľné metódy. Tu sú:

//Uloženie hodnoty: localStorage.setItem("Kľúč", "Hodnota"); //Získanie hodnoty: var value = localStorage.getItem("Key"); //Odstránenie hodnoty: localStorage.removeItem("Kľúč"); //Vymazanie celého úložiska: localStorage.clear();

S lokálny obchod môžete tiež pracovať ako s bežným poľom:

//Uloženie hodnoty: localStorage["Kľúč"] = "Hodnota"; //Získanie hodnoty: var value = localStorage["Kľúč"]; //Vymazanie hodnoty: delete localStorage["Kľúč"];

Okrem objektu lokálny obchod je tam aj predmet sessionStorage. Práca s ním sa vykonáva rovnakým spôsobom, jediný rozdiel je v tom, že všetky údaje z neho sa automaticky zničia po zatvorení prehliadača alebo karty so stránkou. LocalStorage ukladá dáta na dlhú dobu, kým tieto dáta nevymaže skript, alebo používateľ prehliadača nevymaže lokálne úložisko pomocou nastavení.

Príklady

V nasledujúcom príklade zapíšeme používateľské meno do lokálneho úložiska:

LocalStorage.setItem("meno", "John");

Po chvíli dostaneme späť toto meno:

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

Ako vidíte, nie je tu nič zložité, všetko je oveľa jednoduchšie ako rovnaká práca so súbormi cookie.

Ukladanie predmetov

Lokálne úložisko nie je schopné ukladať objekty a JavaScript polia aj keď je to často pohodlné. Existuje však spôsob - musíte tieto údaje serializovať do formátu JSON - získate reťazec, ktorý už môže byť uložený v localStorage. Potom, keď potrebujeme tento objekt získať späť – skonvertujeme reťazec z JSON späť na objekt – a pokojne ho použijeme.

Pozrime sa na tento proces na príklade. Serializujte objekt a uložte ho do lokálneho úložiska:

//Zadaný objekt: var obj = (meno: "Ivan", arr: ); //Serializujte to na "("meno": "John", "arr": )": var json = JSON.stringify(obj); //Zápis do localStorage s kľúčom obj: localStorage.setItem("obj", json);

Po chvíli dostaneme objekt späť:

//Získanie údajov z localStorage späť ako JSON: var json = localStorage.getItem("obj"); //Konvertujte ich späť na objekt JavaScript: var obj = JSON.parse(json); konzola log(obj);

Pridané vlastnosti

Určenie počtu záznamov v úložisku: alert(localStorage.length).

Určenie názvu kľúča podľa jeho čísla: alert(localStorage.key(číslo)).

Pri vykonávaní operácií úložiska sa spustí udalosť na sklade. Ak k tejto udalosti naviažete funkciu, bude v nej k dispozícii objekt Event s nasledujúcimi vlastnosťami:

function func(event) ( var key = event.key; //kľúč meniteľných údajov var oldValue = event.oldValue; //stará hodnota var newValue = event.newValue; //nová hodnota var storageArea = event.storageArea; // úložný priestor)

Pridať. materiál

Uloženie poľa do lokálneho úložiska: https://youtu.be/sYUILPMnrIo

Čo robiť ďalej:

Začnite riešiť problémy na nasledujúcom odkaze: úlohy na lekciu.

Keď je všetko rozhodnuté - prejdite na štúdium novej témy.

• lekcia č.
  playlist na youtube
  Praktická aplikácia ES6

Niektoré videá nás môžu predbehnúť, pretože sme v tomto návode nepokryli celý ES6. Tieto videá preskočte a pozrite si ich neskôr.

Poslal som článok s príbehom o HTML5 LocalStorage v prehliadačoch. Dajme mu slovo.

Snažil som sa napísať čo najjednoduchší a najzrozumiteľnejší návod na používanie technológie localStorage. Článok sa ukázal byť pomerne malý, pretože samotná technológia a prostriedky na prácu s ňou nenesú nič zložité. Ak chcete začať, stačí poznať trochu JavaScriptu. Venujte tomuto článku 10 minút a pokojne si do životopisu môžete pridať riadok „Viem pracovať s localStorage“.

Čo je localStorage?

Takto vyzerá objekt JavaScript:

Var myCar = ( kolesá: 4, dvere: 4, motor: 1, názov: "Jaguar" )

A takto vyzerá JSON. Takmer rovnaké ako bežný objekt js, iba všetky vlastnosti musia byť uzavreté v úvodzovkách.

( "firstName": "Ivan", "lastName": "Ivanov", "address": ( "streetAddress": "Moskovskoye sh., 101, kv.101", "mesto": "Leningrad", "postalCode": 101101 ), "phoneNumbers": [ "812 123-1234", "916 123-4567" ] )

Aby ste pochopili, čo je localStorage, predstavte si, že niekde vo vašom prehliadači je taký objekt, ktorý môžeme použiť. Tento objekt zároveň nevymaže hodnoty, ktoré tam zapíšeme, ak znova načítame stránku alebo dokonca úplne zatvoríme prehliadač.

V JavaScripte je localStorage vlastnosť globálneho objektu prehliadača (okna). Dá sa k nemu pristupovať ako window.localStorage alebo len localStorage.

Za zmienku tiež stojí, že prehliadač má klon localStorage, ktorý sa nazýva sessionStorage. Ich jediný rozdiel je v tom, že táto ukladá údaje iba pre jednu kartu (reláciu) a jednoducho uvoľní svoje miesto hneď, ako kartu zatvoríme

Poďme ho vidieť naživo. Napríklad v Google Chrome musíte otvoriť DevTools (F12), prejdite na kartu „Zdroje“ a na ľavom paneli uvidíte localStorage pre túto doménu a všetky hodnoty, ktoré obsahuje.

Mimochodom, mali by ste vedieť, ako funguje localStorage s doménami. Pre každú doménu váš prehliadač vytvorí svoj vlastný objekt localStorage, ktorý je možné upravovať alebo prezerať iba v tejto doméne. Napríklad mydomain-1.com nemôže získať prístup k localStorage vašej mydomain-2.com .

Prečo potrebujem localStorage?

LocalStorage je potrebný len na jednu vec – na ukladanie určitých dát medzi používateľskými reláciami. Môžete myslieť na tisíc a jednu vec, ktorá sa dá uložiť do lokálneho úložiska prehliadača. Napríklad prehliadačové hry, ktoré ho využívajú ako uloženie, alebo zaznamenávajú moment, kedy sa používateľ pri pozeraní videa zastavil, rôzne údaje pre formuláre atď.

Ako môžem začať s localStorage?

Veľmi jednoduché.

Práca s localStorage je veľmi podobná práci s objektmi v JavaScripte. Existuje niekoľko spôsobov, ako s ním pracovať.

localStorage.setItem("key", "value")

Metóda, ktorá pridáva do localStorage nový kľúč s hodnotou (a ak takýto kľúč už existuje, prepíše ho novou hodnotou). Píšeme napríklad localStorage.setItem('myKey', 'myValue');

localStorage.getItem("kľúč")

Kľúčom odoberáme určitú hodnotu z úložiska.

localStorage.removeItem("Kľúč")

Vymažte kľúč

localStorage.clear()

Vymazanie celého úložiska

Teraz môžete otvoriť kartu s localStorage vášho prehliadača a sami si precvičiť písanie a získavanie údajov z tohto úložiska. Ak niečo, zapíšeme celý kód do súboru js.

//Pridajte alebo zmeňte hodnotu: localStorage.setItem("myKey", "myValue"); //teraz máte kľúč "myKey" s hodnotou "myValue" uložený v localStorage //Vytlačte ho do konzoly: var localValue = localStorage.getItem("myKey"); console.log(localValue); //"myValue" //delete: localStorage.removeItem("myKey"); //vymazať celý úložný priestor localStorage.clear() To isté, ale s hranatými zátvorkami: localStorage["Key"] = "Hodnota" //nastaviť hodnotu localStorage["Key"] //Získať hodnotu delete localStorage["Key" ] // Odstránenie hodnoty

Chcem tiež poznamenať, že localStorage funguje skvele s vnorenými štruktúrami, ako sú objekty.

//vytvor objekt var obj = ( item1: 1, item2: , item3:"hello" ); var serialObj = JSON.stringify(obj); //serializujte to localStorage.setItem("myKey", serialObj); //zapíšte ho do úložiska pomocou kľúča "myKey" var returnObj = JSON.parse(localStorage.getItem("myKey")) //analyzujte ho späť do objektu

Mali by ste si tiež uvedomiť, že prehliadače alokujú 5 MB pre localStorage. A ak ju prekročíte, dostanete výnimku QUOTA_EXCEEDED_ERR. Mimochodom, s jeho pomocou môžete skontrolovať, či je vo vašom úložisku ešte miesto.

Skúste ( localStorage.setItem("key", "value"); ) catch (e) ( if (e == QUOTA_EXCEEDED_ERR) ( alert("Limit prekročený"); ) )

Namiesto záveru

Bol by som rád, keby si vývojári z tohto krátkeho článku vyvodili pre seba jednoduchý záver, že túto technológiu už s bytom a main môžete použiť vo svojich projektoch. Má dobrú štandardizáciu a vynikajúcu podporu, ktorá sa časom rozvíja.