Ez egy meglehetősen szabványos HTML-tároló, és a JavaScript-ünkkel dinamikus tartalommal tölthetjük fel.

Mivel ebben a példában a jQuery-t fogjuk használni, azt is bele kell foglalnia a HTML-dokumentumba.

JavaScript

Ha egy egyszerű „teendőlista” alkalmazás felépítésére gondolunk, először azt kell ellenőriznünk, hogy a bemenet értéke üres-e, amikor a felhasználó az „add” vagy „check” gombra kattint:

$("#add").click(function() ( var Description = $("#leírás").val(); //ha a teendő üres if($("#leírás").val( ) == "") ( $("#alert").html(" Figyelem!Üresen hagytad a teendőt"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )

Mindössze annyit tettünk, hogy teszteltük a Hozzáadás gombra kattintást, és egy egyszerű tesztet futtattunk, hogy megnézzük, a felhasználó kitöltötte-e valamit a beviteli mezőben. Ha nem, akkor az alert div felugrik és 1000 ms-ig marad, majd eltűnik.

Következő dolgunk, hogy beszúrjuk az értékkel rendelkező listaelemet a beviteli sorba, és ezt bevezetjük, hogy amikor a felhasználó hozzáad egy feladatot, az mindig a lista elejére kerüljön, majd tárolja a listaelem a helyi tárhelyen, például:

// a listaelem hozzáadása $("#todos").prepend("

Amint láthatja, ez egy meglehetősen szabványos jQuery, és amikor a helyi tárhelyről van szó, tárolnunk kell a kulcsot és az értéket. A kulcs az a név, amit magunknak adunk, ebben az esetben csak "Todos"-nak hívjuk, majd meg kell határoznunk, hogy mit akarunk tárolni, ami ebben az esetben az összes HTML, ami a rendezetlen lista Todos-jában található. Mint látható, mindent rögzítettünk a jQuery-vel, végül „false”-t (false) adtunk vissza, hogy az űrlap ne adja fel, és az oldalunk ne frissüljön.

Következő lépésünk annak ellenőrzése, hogy van-e helyben tárolva valami. Ha van, akkor fel kell tenni az oldalra, mivel a kulcsunknak a "todos" nevet adtuk, ellenőriznünk kell a létezését. Mint ez:

// ha van valami a helyi tárolóhelyen, hogy if(localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )

Ha teszteli az alkalmazásunkat, és újratölti az oldalt, látni fogja, hogy már működik. Nem kell mást tennünk, mint létrehozni egy függvényt, amely a teljes lista törléséért lesz felelős. Töröljük az összes helyi tárhelyet, újratöltjük az oldalt, hogy a változtatás érvénybe lépjen, majd a "false" értéket adjuk vissza, hogy megakadályozzuk az URL előtti hash-t:

// az összes helyi tár törlése $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));

Teljes kód alábbiak szerint:

$("#add").click(function() ( var Description = $("#leírás").val(); if($("#leírás").val() == "") ( $( "#alert").html(" Figyelem!Üresen hagytad a teendőt"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("

Böngésző támogatás

A Web Storage támogatása nagyon jó a HTML5 specifikációhoz, minden nagyobb böngésző támogatja, sőt az IE8 is.

Az előző oktatóanyagban tárgyalt cookie-k nagyon korlátozottak: egy cookie csak 4096 karakterből állhat, a cookie-k száma domainenként 30-50 körül lehet böngészőtől függően. Ezért sajnos, de nem lehet ott sok információt tárolni. Történelmileg így történt.

E korlátozás megkerülésére a böngészőknek van egy alternatívája a cookie-k helyett – ezt helyi tárhelynek hívják. A helyi tárolóban 5-10 megabájtnyi információt, vagy akár többet is tárolhatunk hosszú ideig.

Munka a helyi tárolóval

A helyi tároláshoz a böngészőbe épített localStorage objektumot kell használni. 4 könnyen érthető módszere van. Itt vannak:

//Az érték tárolása: localStorage.setItem("Kulcs", "Érték"); //Az érték lekérése: var value = localStorage.getItem("Key"); //Érték eltávolítása: localStorage.removeItem("Kulcs"); //Az összes tárhely törlése: localStorage.clear();

VAL VEL helyi raktárúgy is dolgozhat, mint egy normál tömbnél:

//Az érték tárolása: localStorage["Key"] = "Érték"; //Az érték lekérése: var value = localStorage["Kulcs"]; //Érték törlése: delete localStorage["Kulcs"];

Kivéve az objektumot helyi raktár van egy tárgy is sessionStorage. A vele való munkavégzés ugyanúgy történik, az egyetlen különbség az, hogy az összes adat automatikusan megsemmisül, miután bezárja a böngészőt vagy a lapot. Nos, a localStorage sokáig tárolja az adatokat, amíg ezeket az adatokat a szkript törli, vagy a böngésző felhasználója a beállítások segítségével ki nem törli a helyi tárhelyet.

Példák

A következő példában a felhasználónevet a helyi tárhelyre írjuk:

LocalStorage.setItem("név", "János");

Egy idő után visszakapjuk ezt a nevet:

Alert(localStorage.getItem("név"));

Amint látja, itt nincs semmi bonyolult, minden sokkal egyszerűbb, mint ugyanaz a munka a sütikkel.

Tárgyak mentése

A helyi tárhely nem képes objektumok és JavaScript tömbök bár ez gyakran kényelmes. De van egy mód - ezeket az adatokat JSON formátumba kell szerializálni -, akkor kapsz egy karakterláncot, amely már tárolható a localStorage-ban. Aztán amikor vissza kell szereznünk ezt az objektumot – a JSON-ból visszaalakítjuk a karakterláncot objektummá –, és nyugodtan használjuk.

Nézzük meg ezt a folyamatot egy példán keresztül. Sorolja fel az objektumot, és mentse el a helyi tárhelyre:

//Adott egy objektum: var obj = (név: "Ivan", arr: ); //Serializálása a következőre: "("név": "John", "arr": )": var json = JSON.stringify(obj); //Írjon a localStorage-ba az obj kulccsal: localStorage.setItem("obj", json);

Egy idő után visszakapjuk az objektumot:

//Adatok visszakérése a localStorage-ból JSON-ként: var json = localStorage.getItem("obj"); //Alakítsa vissza őket JavaScript objektummá: var obj = JSON.parse(json); konzolnapló(obj);

További jellemzők

A tárhelyen lévő rekordok számának meghatározása: alert(localStorage.length).

Kulcs nevének meghatározása a szám alapján: alert(localStorage.key(szám)).

Tárolási műveletek végrehajtásakor egy esemény aktiválódik raktáron. Ha ehhez az eseményhez köt egy függvényt, akkor a következő tulajdonságokkal rendelkező Event objektum lesz elérhető benne:

függvény func(event) ( var kulcs = esemény.kulcs; //változható adatok kulcsa var oldValue = esemény.oldÉrték; //régi érték var newValue = esemény.újÉrték; //új érték var storageArea = event.storageArea; // tárolási terület)

Hozzáadás. anyag

Tömb tárolása a helyi tárolóban: https://youtu.be/sYUILPMnrIo

Mit csinálsz ezután:

Kezdje el a feladatok megoldását az alábbi linken: feladatok a leckéhez.

Ha minden eldőlt, folytassa egy új téma tanulmányozásával.

• Lecke #
  lejátszási lista a youtube-on
  Az ES6 gyakorlati alkalmazása

Egyes videók megelőzhetik önmagunkat, mivel az oktatóanyag ezen pontján még nem foglalkoztunk az ES6-tal. Csak hagyd ki ezeket a videókat, nézd meg később.

Elküldött egy cikket a HTML5 LocalStorage böngészőkben található történetével. Adjuk meg neki a szót.

Igyekeztem a legegyszerűbb és legérthetőbb útmutatót írni a localStorage technológia használatához. A cikk meglehetősen kicsinek bizonyult, mivel maga a technológia és a vele való munkavégzés eszközei nem tartalmaznak semmi bonyolultat. A kezdéshez csak egy kicsit ismernie kell a JavaScriptet. Adjon tehát 10 percet ennek a cikknek, és nyugodtan hozzáadhatja önéletrajzához a „Tudom, hogyan kell dolgozni a localStorage-szal” sort.

Mi az a localStorage?

Így néz ki egy JavaScript objektum:

Var myCar = ( kerekek: 4, ajtók: 4, motor: 1, név: "Jaguar")

És így néz ki a JSON. Nagyjából ugyanaz, mint egy normál js objektum, csak minden tulajdonságot idézőjelbe kell tenni.

( "firstName": "Ivan", "lastName": "Ivanov", "dress": ( "utcacím": "Moskovskoye sh., 101, kv.101", "city": "Leningrád", "postalCode": 101101 ), "phoneNumbers": [ "812 123-1234", "916 123-4567" ] )

A localStorage megértéséhez képzelje el, hogy valahol a böngészőjében van egy ilyen objektum, amelyet használhatunk. Ugyanakkor ez az objektum nem törli az oda írt értékeket, ha újratöltjük az oldalt, vagy akár teljesen bezárjuk a böngészőt.

JavaScriptben beszélve a localStorage a böngésző globális objektumának (ablak) tulajdonsága. A window.localStorage vagy csak a localStorage néven érhető el.

Azt is érdemes megemlíteni, hogy a böngészőnek van egy localStorage klónja, amelyet sessionStorage-nak hívnak. Az egyetlen különbség az, hogy az utóbbi csak egy laphoz (munkamenethez) tárol adatokat, és amint bezárjuk a lapot, egyszerűen felszabadítja a helyet.

Lássuk őt élőben. Például be Google Chrome meg kell nyitnia a DevTools (F12) alkalmazást, lépjen az "Erőforrások" fülre, és a bal oldali panelen látni fogja a tartomány helyi tárhelyét és az abban található összes értéket.

Egyébként tudnia kell, hogyan működik a localStorage a tartományokkal. A böngésző minden tartományhoz létrehoz egy saját localStorage objektumot, amelyet csak az adott tartományban lehet szerkeszteni vagy megtekinteni. Például a mydomain-1.com nem tud hozzáférni a mydomain-2.com helyi tárhelyéhez.

Miért van szükségem helyi tárhelyre?

A LocalStorage egyetlen dologra van szükség – bizonyos adatok tárolására a felhasználói munkamenetek között. Ezer és egy dologra gondolhat, amit a böngésző helyi tárhelyén tárolhat. Például böngészőjátékok, amelyek mentésként használják, vagy rögzítik azt a pillanatot, amikor a felhasználó megállt egy videó megtekintése közben, különféle űrlapok adatai stb.

Hogyan kezdhetem el a localStorage használatát?

Nagyon egyszerű.

A localStorage használata nagyon hasonlít a JavaScript objektumokkal való munkához. Számos módszer létezik a munkára.

localStorage.setItem("kulcs", "érték")

Módszer, amely hozzáadja a localStorage-ot új kulcsértékkel (és ha már létezik ilyen kulcs, akkor felülírja egy új értékkel). Írjuk például, hogy localStorage.setItem('myKey', 'myValue');

localStorage.getItem("kulcs")

Egy bizonyos értéket kulcsonként veszünk ki a tárolóból.

localStorage.removeItem("Kulcs")

Törölje a kulcsot

localStorage.clear()

Az összes tárhely törlése

Most megnyithat egy lapot a böngésző helyi tárolójával, és gyakorolhatja az adatok írását és lekérését erről a tárhelyről. Ha valami, akkor az összes kódot egy js fájlba írjuk.

//Érték hozzáadása vagy módosítása: localStorage.setItem("myKey", "myValue"); //most a "myKey" kulcs a "myValue" értékkel a localStorage-ban van tárolva //Nyomtassa ki a konzolba: var localValue = localStorage.getItem("myKey"); console.log(localValue); //"myValue" //delete: localStorage.removeItem("myKey"); //összes tárhely törlése localStorage.clear() Ugyanaz, de szögletes zárójelekkel: localStorage["Kulcs"] = "Érték" //állítsa be a localStorage["Kulcs"] értékét //Az érték lekérése delete localStorage["Kulcs" ] // Érték törlése

Azt is szeretném megjegyezni, hogy a localStorage remekül működik beágyazott struktúrákkal, például objektumokkal.

//objektum létrehozása var obj = ( item1: 1, item2: , item3:"hello" ); var serialObj = JSON.stringify(obj); //szerializálása localStorage.setItem("myKey", serialObj); //írja a tárolóba a "myKey" kulccsal var returnObj = JSON.parse(localStorage.getItem("myKey")) //elemzi vissza egy objektummá

Azt is tudnia kell, hogy a böngészők 5 MB-ot foglalnak le a localStorage számára. És ha túllépi, QUOTA_EXCEEDED_ERR kivételt kap. Segítségével egyébként ellenőrizheti, hogy van-e még hely a tárolójában.

Próbáld ki ( localStorage.setItem("kulcs", "érték"); ) catch (e) ( if (e == QUOTA_EXCEEDED_ERR) ( alert("Korlát túllépve"); ) )

Konklúzió helyett

Szeretném, ha a fejlesztők ebből a rövid cikkből egy egyszerű következtetést vonnának le maguknak, hogy ezt a technológiát már with may and main használható projektjeiben. Jó szabványosítással és kiváló támogatással rendelkezik, ami csak idővel fejlődik.