Çfarë është ruajtja lokale. Si të përdorni ruajtjen e të dhënave lokale në JavaScript

Krijimi i një aplikacioni të listës së detyrave është zakonisht aplikacioni i parë që bëni kur mësoni JavaScript, por problemi me të gjitha ato aplikacione është se kur rifreskoni faqen, të gjitha ato lista zhduken.
Ekziston një zgjidhje e thjeshtë - përdorimi i ruajtjes lokale. Avantazhi i ruajtjes lokale është se ju mund të ruani pjesë të të dhënave në kompjuterin e përdoruesit dhe kur faqja ringarkohet, të gjitha listat e detyrave lihen në vend.

Çfarë është ruajtja lokale?

Ruajtja lokale është pjesë e rrjetit të ruajtjes, i cili në vetvete është pjesë e specifikimit HTML5. Ekzistojnë dy mundësi për ruajtjen e të dhënave në një BOM:

Magazinimi lokal: Ruan të dhënat pa një datë skadimi dhe ky është opsioni që do të përdorim sepse duam që listimet tona të qëndrojnë në faqe për aq kohë sa të jetë e mundur.
Ruajtja e sesionit: Ruan të dhënat vetëm për një seancë, kështu që nëse përdoruesi mbyll skedën dhe e rihap atë, të gjitha të dhënat e tij do të humbasin.

Me fjalë të thjeshta, gjithçka që bën ruajtja në ueb është të ruajë çiftet e çelësit/vlerës me një emër në nivel lokal, dhe ndryshe nga skedarët e skedarëve kuki, këto të dhëna vazhdojnë edhe nëse mbyllni shfletuesin ose fikni kompjuterin tuaj.

Nëse po mendojmë për një listë detyrash, atëherë do t'ju duhen sa vijon:

Hyrja, ku do të jetë e mundur të vendosim listën tonë
Butoni Enter për të shtuar listën
Butoni për të pastruar të gjithë ditarin
Një kontejnerë liste e pa renditur ku lista jonë do të vendoset në një listë elementësh
Dhe së fundi, na duhet një kontejner DIV për të shfaqur një njoftim kur përpiqeni të futni një detyrë boshe.

Pra, HTML-ja jonë duhet të duket diçka si kjo:

Është një kontejner mjaft standard HTML dhe me JavaScript-in tonë ne mund ta mbushim të gjithën me përmbajtje dinamike.

Meqenëse ne do të përdorim jQuery në këtë shembull, do t'ju duhet gjithashtu ta përfshini atë në dokumentin HTML.

JavaScript

Nëse mendojmë për strukturën e një aplikacioni të thjeshtë "lista për të bërë", gjëja e parë që duhet të bëjmë është të kontrollojmë nëse hyrja ka një vlerë boshe kur përdoruesi klikon në butonin "shto" ose "kontrollo".

$("#add").click(function() ( var Përshkrimi = $("#description").val(); //nëse detyrat janë bosh if($("#description").val( ) == "") ( $("#alert").html(" Paralajmërim! Ju i keni lënë bosh detyrat për të bërë"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )

Gjithçka që bëmë ishte testimi i klikimit në butonin Shto dhe kryenim një test të thjeshtë për të parë nëse përdoruesi plotësoi të dhënat me diçka. Nëse jo, atëherë div i alarmit shfaqet dhe qëndron për 1000 ms dhe më pas zhduket.

Gjëja tjetër që duhet të bëjmë është të fusim artikullin e listës me vlerën në rreshtin e hyrjes dhe do ta paraqesim atë në mënyrë që kur përdoruesi të shtojë një detyrë, ajo të shkojë gjithmonë në krye të listës dhe më pas të ruajë artikulli i listës në ruajtjen lokale, si kjo:

// shtoni artikullin e listës $("#todos").prepend("

" + Përshkrimi + "

"); // fshi çdo gjë që është në hyrje $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem ("todos", todos); kthe i rremë; ));

Siç mund ta shihni, ky është jQuery mjaft standard dhe kur bëhet fjalë për ruajtjen lokale, ne duhet të ruajmë çelësin dhe vlerën. Çelësi është një emër që i japim vetes, në këtë rast thjesht do ta quajmë "Todos", më pas duhet të përcaktojmë se çfarë duam të ruajmë, që në këtë rast është i gjithë HTML që ndodhet brenda Todos të listës së pa renditur. Siç mund ta shihni, ne kapëm gjithçka me jQuery, dhe më në fund kthyem "false" (false) në mënyrë që forma të mos dorëzohet dhe faqja jonë të mos rifreskohet.

Hapi ynë tjetër është të kontrollojmë nëse kemi diçka të ruajtur në vend. Nëse ka, atëherë duhet ta vendosim në faqe, duke qenë se çelësit tonë i kemi dhënë emrin "todos", duhet të kontrollojmë ekzistencën e tij. Si kjo:

// nëse kemi diçka në vendin e ruajtjes lokale që if(localStorage.getItem("todos")) ($("#todos").html(localStorage.getItem("todos")); )

Nëse testoni aplikacionin tonë dhe rifreskoni faqen, do të shihni që tashmë po funksionon. Gjithçka që duhet të bëjmë është të krijojmë një funksion që do të jetë përgjegjës për pastrimin e të gjithë listës. Ne fshijmë të gjithë hapësirën ruajtëse lokale, ringarkojmë faqen që ndryshimi ynë të hyjë në fuqi dhe më pas kthejmë "false" për të parandaluar hash-in përpara URL-së si kjo:

// pastroni të gjithë hapësirën ruajtëse lokale $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));

Kodi i plotë duket si ky:

$("#add").click(function() ( var Përshkrimi = $("#description").val(); if($("#description").val() == "") ( $( "#alert").html(" Paralajmërim! Ju i keni lënë bosh detyrat për të bërë"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("

" + Përshkrimi + "

"); $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem ("todos", todos); kthe false; )); if(localStorage .getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); ) $("#clear").click(function() ( window.localStorage.clear( Vendndodhja.reload();kthim false;));

Mbështetja e shfletuesit

Mbështetja e ruajtjes në ueb është mjaft e mirë për specifikat HTML5, ajo mbështetet nga të gjithë shfletuesit kryesorë dhe madje edhe IE8.

Kukit që trajtuam në tutorialin e mëparshëm janë shumë të kufizuar: një cookie mund të ketë vetëm 4096 karaktere dhe numri i skedarëve të skedarëve për domen mund të jetë rreth 30-50 në varësi të shfletuesit. Prandaj, mjerisht, por nuk do të jetë e mundur të ruhen shumë informacione atje. Kështu ndodhi historikisht.

Për të kapërcyer këtë kufizim, shfletuesit kanë një alternativë ndaj cookies - quhet ruajtja lokale. Në ruajtjen lokale, ne mund të ruajmë 5-10 megabajt informacion ose edhe më shumë për një kohë të gjatë.

Puna me ruajtjen lokale

Për të punuar me ruajtjen lokale, synohet objekti localStorage i integruar në shfletues. Ka 4 metoda të lehta për t'u kuptuar. Këtu ata janë:

//Ruajtja e vlerës: localStorage.setItem("Key", "Vlera"); //Marrja e vlerës: var vlera = localStorage.getItem("Key"); //Hiq vlerën: localStorage.removeItem("Key"); //Fshi gjithë hapësirën ruajtëse: localStorage.clear();

NGA ruajtja lokale ju gjithashtu mund të punoni si me një grup të rregullt:

//Ruajtja e vlerës: localStorage["Key"] = "Vlera"; //Marrja e vlerës: var value = localStorage["Key"]; //Fshirja e një vlere: fshini localStorage["Key"];

Përveç objektit ruajtja lokale ka edhe një objekt Ruajtja e sesioneve. Puna me të kryhet në të njëjtën mënyrë, ndryshimi i vetëm është se të gjitha të dhënat prej tij shkatërrohen automatikisht pas mbylljes së shfletuesit ose skedës me sitin. Epo, localStorage ruan të dhënat për një kohë të gjatë derisa këto të dhëna të fshihen nga skripti, ose përdoruesi i shfletuesit pastron ruajtjen lokale duke përdorur cilësimet.

Shembuj

Në shembullin e mëposhtëm, ne do të shkruajmë emrin e përdoruesit në ruajtjen lokale:

LocalStorage.setItem("emri", "Gjoni");

Pas një kohe, ne do të marrim këtë emër:

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

Siç mund ta shihni, nuk ka asgjë të komplikuar këtu, gjithçka është shumë më e thjeshtë se e njëjta punë me biskota.

Ruajtja e objekteve

Ruajtja lokale nuk është në gjendje të ruajë objekte dhe grupe JavaScript, megjithëse kjo shpesh është e përshtatshme. Por ka një mënyrë - ju duhet t'i serializoni këto të dhëna në formatin JSON - ju merrni një varg që tashmë mund të ruhet në localStorage. Më pas, kur duhet ta kthejmë këtë objekt - ne e kthejmë vargun nga JSON në një objekt - dhe e përdorim me qetësi.

Le ta shohim këtë proces me një shembull. Serializoni objektin dhe ruajeni në ruajtjen lokale:

//Ipet një objekt: var obj = (emri: "Ivan", arr: ); //Serializojeni atë në "("emri": "Gjoni", "arr": )": var json = JSON.stringify(obj); //Shkruani në localStorage me çelësin obj: localStorage.setItem("obj", json);

Pas një kohe, ne e kthejmë objektin:

//Kthejini të dhënat nga localStorage si JSON: var json = localStorage.getItem("obj"); //Konvertojini ato përsëri në një objekt JavaScript: var obj = JSON.parse(json); regjistri i konsolës (obj);

Karakteristika shtesë

Përcaktimi i numrit të regjistrimeve në ruajtje: alert(localStorage.length).

Përcaktimi i emrit të një çelësi sipas numrit të tij: alert(localStorage.key(number)).

Gjatë kryerjes së operacioneve të ruajtjes, shfaqet një ngjarje ruajtje. Nëse lidhni një funksion me këtë ngjarje, atëherë objekti Ngjarje me vetitë e mëposhtme do të jetë i disponueshëm në të:

funksioni func(event) ( tasti var = ngjarje.çelësi; //çelësi i të dhënave të ndryshueshme var oldValue = event.oldValue; //vlera e vjetër var newValue = event.newValue; //vlera e re var storageArea = ngjarje.storageArea; // Zona e ruajtjes)

Shtoni. material

Ruajtja e një grupi në ruajtjen lokale: https://youtu.be/sYUILPMnrIo

Çfarë do të bëni më pas:

Filloni të zgjidhni problemet në lidhjen e mëposhtme: detyra për mësimin.

Kur gjithçka është vendosur - shkoni në studimin e një teme të re.

Mësim #
listë për luajtje në youtube
Zbatimi praktik i ES6

Disa video mund të na dalin përpara pasi nuk e kemi mbuluar të gjithë ES6 deri në këtë pikë në tutorial. Thjesht kaloni këto video, shikoni më vonë.

Përkthimi i artikullit: Si të përdorni ruajtjen lokale për JavaScript.
Sara Viera.

Hyrje në bazat e programimit JavaScript shpesh fillon me krijimin e aplikacioneve të thjeshta, si p.sh. fletoren elektronike që përdorim për të regjistruar gjëra dhe ngjarje që mund t'i harrojmë. Por aplikacione të tilla kanë një problem - pas ringarkimit të faqes, lista e të gjitha hyrjeve të mbetura më parë zhduket, domethënë aplikacioni kthehet në gjendjen e tij origjinale.

Ekziston një mënyrë shumë e thjeshtë për të dalë nga kjo situatë, e cila përfshin përdorimin e mekanizmit lokal të ruajtjes localStorage. Për shkak të faktit se localStorage na lejon të ruajmë të dhënat e nevojshme në kompjuterin e përdoruesit, lista e detyrave dhe ngjarjeve të planifikuara të përmendura më sipër do të jetë ende e disponueshme pas ringarkimit të faqes, përveç kësaj, localStorage është një mënyrë çuditërisht shumë e thjeshtë për të ruajtur të dhënat dhe aksesoni atë kur është e nevojshme.

Çfarë është LocalStorage?

Ky është një mekanizëm lokal i ruajtjes së të dhënave që është pjesë e teknologjisë së ruajtjes në ueb të ofruar nga specifikimi HTML5. Ekzistojnë dy mundësi ruajtjeje të lejuara nga ky specifikim:

Ruajtja lokale: ju lejon të ruani informacionin pa kufizime në periudhat e ruajtjes. Është ky opsion që ne do të përdorim, pasi lista e detyrave të disponueshme në shembullin tonë duhet të ruhet përgjithmonë.
Përdorimi i seancave: siguron sigurinë e të dhënave vetëm për periudhën prej një sesioni, domethënë pasi përdoruesi të mbyllë skedën e aplikacionit tonë dhe ta rihapë atë, të gjitha informacionet e nevojshme për funksionimin e mëtejshëm të aplikacionit do të fshihen.

E thënë thjesht, gjithçka që bën Web Storage është ruajtja e të dhënave në formë të emërtuar çelës/vlerë në nivel lokal dhe ndryshe nga dy metodat e tjera, secila prej të cilave ka të metat e veta ( Ruajtja e informacionit në sesion parashikon përdorimin e anës së serverit për këtë, përveç kësaj, pas mbylljes së seancës së përdoruesit, ky informacion fshihet dhe cookies, megjithëse përdoren për ruajtje në anën e klientit, nuk janë të besueshme sepse përdoruesi mund të anulojë mbështetjen e tij përmes cilësimet e shfletuesit.) ruan të dhënat edhe në atë rast nëse e keni mbyllur shfletuesin ose keni fikur kompjuterin tuaj. ( * Mora guximin të ndryshoj dhe plotësoj disi përmbajtjen e këtij paragrafi, pasi besoj se autori ka bërë pasaktësi në origjinal.)

HTML

Nëse i përmbahemi shembullit tonë, në të cilin duam të krijojmë një version elektronik të një fletoreje, atëherë më poshtë janë të gjithë përbërësit e nevojshëm për zbatimin e tij:

Një fushë për futjen e hyrjeve të reja (ngjarje, raste, etj.).
Butoni për të konfirmuar hyrjen e futur.
Butoni për të pastruar një listë detyrash të krijuar tashmë.
Një listë e pa renditur që do të përditësohet me hyrje të reja.
Së fundi, na duhet një bllok div si një kontejner që përmban mesazhe për t'i shfaqur përdoruesit, si për shembull një paralajmërim se ai ka harruar të fusë vlerën e rekordit tjetër, duke e lënë bosh fushën e hyrjes.

Si rezultat, shënimi ynë duhet të duket diçka si kjo:

Ky është një shabllon mjaft standard HTML që ne mund ta mbushim me përmbajtje të krijuar në mënyrë dinamike duke përdorur JavaScript.

JavaScript

Në lidhje me strukturën e aplikacionit më të thjeshtë të bllokut të shënimeve në shembullin tonë, gjëja e parë që duhet të bëjmë është të sigurojmë që ngjarja e klikimit të butonit të gjurmohet "Shto një shënim" dhe kontrolloni nëse është futur ndonjë informacion në fushën e tekstit për regjistrim, pra në momentin që shtypet butoni ai të mos jetë bosh. Diçka si kjo për shembull:

$("#add"). kliko(funksion() (
//nëse fusha e tekstit është bosh
$("#alert").html(" Kujdes! Futni një hyrje në tekst
fushë.");
kthej false;
}

Ja çfarë bëjmë me këtë copë kodi. Kur shtypni një buton "Shto një shënim" ne kontrollojmë nëse përdoruesi ka futur diçka në fushë për regjistrimin e ri. Nëse ai nuk e bëri, atëherë shfaqet div që ne ofrojmë për shfaqjen e mesazheve, duke informuar përdoruesin se fusha e hyrjes së regjistrimit është bosh dhe më pas, pas 1000ms (1 sekondë), elementi div, dhe në përputhje me rrethanat, mesazhi zhduket. Funksioni më pas kthehet false, pas së cilës shfletuesi ndalon ekzekutimin e pjesës tjetër të skriptit dhe aplikacioni është gati të fusë përsëri një rekord të ri.

Hapi ynë tjetër është të shtojmë vlerën e futur në fushën e hyrjes në fillim të listës duke gjeneruar një element të ri të listës. Kështu, kur përdoruesi shton një hyrje tjetër, ai gjithmonë do të vendoset në krye të listës së detyrave të planifikuara dhe ngjarjeve të pritshme. Pas kësaj, ne vetëm duhet të ruajmë listën duke përdorur mekanizmin localStorage:

// Shtoni një hyrje në një listë ekzistuese
$("#todos").prepend("

" + Përshkrimi + "

");
// Pastro fushën e hyrjes
$("#form").reset();

kthej false;
});

Siç mund ta keni vënë re, nuk ka asgjë të pazakontë këtu, ai përdor kodin standard jQuery. Në pikën e referencës për objektin localStorage, duhet të specifikojmë të dhënat që ruajmë në formën çelësi / vlera. Ju mund të përdorni një emër arbitrar për çelësin, dhe unë e emërova atë "todos", atëherë duhet të specifikoni se çfarë duhet të ruajmë në memorie. Në këtë rast, është një pjesë e plotë e shënimit HTML e përfshirë në një listë të pa renditur (midis etiketave) që shfaq të gjitha hyrjet e futura më parë nga përdoruesi. Nga kodi, mund të shihni se ne thjesht marrim fragmentin që na nevojitet duke përdorur metodën jQuery .html() dhe në fund, pasi kemi kryer të gjitha veprimet e nevojshme, vendosim vlerën e kthimit të funksionit në false, gjë që parandalon formën të dhënat nga dërgimi dhe, rrjedhimisht, nga ringarkimi i faqes sonë.

Tani, le të themi se përdoruesi ynë ka bërë tashmë disa hyrje më herët, dhe për funksionimin e mëtejshëm normal të aplikacionit, duhet të kontrollojmë nëse localStorage përmban informacionin e ruajtur më parë në kompjuter, dhe nëse po, ta shfaqim atë për përdoruesin. Meqenëse emri i çelësit tonë është "todos", ne duhet të kontrollojmë ekzistencën e tij si kjo:

// nëse tashmë ka të dhëna në ruajtjen lokale, atëherë shfaqini ato

}

Për të kontrolluar praninë e të dhënave, ne përdorëm deklaratën e zakonshme if dhe kur plotësohej kushti që specifikuam, ne thjesht i morëm të gjitha të dhënat nga ruajtja lokale, duke i vendosur ato si shenjë HTML brenda një liste të pa renditur, duke përdorur të cilën hyrjet ishin futur më parë nga përdoruesi shfaqen.

Nëse testoni aplikacionin tuaj më të thjeshtë, do të zbuloni se pas rifreskimit të faqes, gjithçka mbetet në vend. Dhe tani, gjëja e fundit që na mbetet të bëjmë është të krijojmë një funksion me të cilin përdoruesi mund të fshijë të gjitha të dhënat e tij nëse është e nevojshme. Kjo bëhet duke pastruar localStorage dhe duke ringarkuar faqen për të aktivizuar ndryshimet e bëra. Më pas, vendosim vlerën e kthimit të funksionit në false, si në rastin e mëparshëm, gjë që parandalon shfaqjen e hash-it në URL. ( *dhe nuk e lëviz faqen lart.):

// Hapësirë e plotë e ruajtjes lokale
window.localStorage.clear();
vendndodhjen.reload();
kthej false;
});

Si rezultat, ne kemi një aplikacion plotësisht funksional. Dhe duke bashkuar të gjitha fragmentet e mësipërme, marrim kodin e plotë të aplikimit:

$("#add"). kliko(funksion() (
var Përshkrimi = $("#përshkrim").val();
if($("#description").val() == "") (
$("#alert").html(" Kujdes! Futni një hyrje në
fushë teksti.");
$("#alert").fadeIn().delay(1000).fadeOut();
kthej false;
}
$("#todos").prepend("

"
+ Përshkrimi + "

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

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

$("#clear").click(function() (
window.localStorage.clear();
vendndodhjen.reload();
kthej false;
});

Mbështetja e shfletuesit.

Specifikimi HTML5 ka një mbështetje mjaft të fortë për teknologjinë Web Storage, për shkak të së cilës zbatohet edhe nga shfletuesit më të njohur, madje edhe IE8. Problemi i vetëm është IE7, nëse jeni akoma i interesuar.

konkluzioni.

Në aplikacione kaq të vogla, mekanizmi localStorage mund të zëvendësojë me sukses përdorimin e bazave të të dhënave. Për të ruajtur sasi të vogla të dhënash, nuk është e nevojshme të përdoren alternativa më komplekse.

* Shënim i përkthyesit.

Shikime postimi: 475

Nga aplikacionet në ueb si Google Wave, Gmail, etj. ne shohim që ruajtja e të dhënave nga ana e klientit është një ide e mirë për shumicën e aplikacioneve në internet. Mendoni vetë, vëllimi është shumë i rëndësishëm për internetin celular. Pyetjet e të njëjtit lloj në 70% të rasteve (nuk kam bërë asnjë llogaritje, thjesht shprehja e argumenteve në përqindje është shumë më solide) kthejnë të njëjtat të dhëna. Përveç kësaj, ju mund të ruani memorien jo vetëm të të dhënave, por edhe vetë aplikacionin.

Deri më tani, metoda më e njohur për ruajtjen lokale kanë qenë cookie-t. Një cookie është një çift çelës-vlerë që ruhet lokalisht në një skedar teksti (4 KB ose 20 çifte maksimumi të vlerës-kyç (IE) për domen). Përveç kësaj, cookies dërgohen në server me çdo kërkesë HTTP në server, madje edhe me AJAX. Është e natyrshme që standardi duhet të kishte shfaqur mjete për ruajtjen më praktike të të dhënave në shfletues.

Nga i gjithë specifikimi HTML5, dyqanet lokale të të dhënave nga ana e klientit janë ndoshta një nga temat më të diskutuara. Ka edhe opinione pozitive dhe negative. Nga minuset, më e rëndësishmja është shkelja e konceptit të rëndësisë së të dhënave për të gjithë përdoruesit, d.m.th. mënyra se si funksionon tani: përdoruesi hyn në faqe dhe sheh versionin më të fundit të aplikacionit në internet, atë që shohin të gjithë përdoruesit e tjerë. Megjithatë, me përdorimin e saktë të ruajtjes lokale dhe përditësimin në kohë të të dhënave, këto probleme mund të shmangen.

Pra, ruajtja nga ana e klientit ndahet në 3 metodologji themelore:

ruajtja e sesioneve.
ruajtje lokale ose Magazinimi global

Le të hedhim një vështrim më të afërt në secilën prej tyre:

1. ruajtja e sesioneve- ruajtja e sesioneve

Ruajtja e sesioneve është më e përshtatshme se kukit. Me implementime të ndryshme max. kufiri mund të jetë i rendit të disa Mbps. Ndryshe nga cookies, të dhënat e sesionit nuk dërgohen me çdo kërkesë.
Përfitimet: Kur kërkohet, ngarkesa është minimale.
Këtu është një shembull i ruajtjes së sesioneve:

SessionStorage.setItem("Emri i përdoruesit", "taranfx"); // define variable sesion alert("Emri juaj është: " + sessionStorage.getItem("username"));// kontrolloni alarmin e aksesit ("Përshëndetje " + sessionStorage.userName); // një metodë tjetër për të hyrë në variablin e sesionit sessionStorage.removeItem("username"); // hiqni variablin në fund

2. ruajtje lokale- ruajtje lokale

Objekti LocalStorage JavaScript është funksionalisht identik me objektin sessionStorage. Ato ndryshojnë vetëm në jetëgjatësi dhe shtrirje. Fushëveprimi: të dhënat në localStorage janë të aksesueshme përmes të gjitha dritareve të shfletuesit ndërsa të dhënat e sesionStorage janë të kufizuara në dritaren në të cilën janë krijuar.
Ruajtja globale e kujtesës caktohet nga shfletuesi, faqet e internetit mund ta përdorin atë për të ruajtur të dhëna të vazhdueshme që nuk duhet të dërgohen në server. Të dhënat janë të aksesueshme përmes JavaScript dhe Flash. Kjo mund të jetë shumë e dobishme për lojërat Flash.

GlobalStorage[""].foo = "bar"; // foo do të jetë i disponueshëm në çdo faqe interneti globalStorage["en"].foo1 = "bar1"; // foo1 do të jetë i disponueshëm në sajtet "..foo2 = "bar2"; // foo2 do të jetë i disponueshëm vetëm në sajt

Kur ruani të dhënat në nivel lokal, specifikimi është rishkruar për të qenë më i sigurt. ato. tani të dhënat lidhen automatikisht me domenin.
Kohëzgjatja: kur ruhen në hapësirën ruajtëse lokale, të dhënat mbahen edhe pas mbylljes së skedës/dritares/shfletuesit.

Ja se si ta bëni atë:

LocalStorage.setItem ("Emri i përdoruesit", "taranfx"); // define variablin në alarmin localStorage("Emri yt është: " + localStorage.getItem("username")); // alert për aksesin ("Përshëndetje " + localStorage.userName); // aksesojeni atë ndryshe localStorage.removeItem("username"); // fshijeni në fund

3. Ruajtja e bazës së të dhënave- ruajtja e bazës së të dhënave

Deri më tani, ne kemi diskutuar hapësirën e kufizuar nga çiftet çelës-vlerë. Por kur keni të bëni me sasi të mëdha të dhënash, bazat e të dhënave janë më të mirat. Shfletuesit përdorin një bazë të dhënash SQLite që funksionon pa procese dhe serverë shtesë. Vetëm me kufizime të vogla, për shembull, mungesa e një çelësi të huaj.

Por si shpërblim, ju merrni një bazë të dhënash të plotë SQL. Dhe puna me të kryhet në SQL.

Përmbledhje e ruajtjes në ueb

Në internet, informacioni mund të ruhet në dy vende: në serverin e internetit dhe në klientin e uebit (d.m.th., kompjuteri i vizitorit të faqes). Disa lloje të dhënash ruhen më mirë në një nga këto vende dhe lloje të tjera në një tjetër.

Vendi i duhur për të ruajtur të dhënat e ndjeshme dhe të rëndësishme do të ishte një server në internet. Për shembull, nëse shtoni artikuj në shportën tuaj të blerjeve në një dyqan online, detajet tuaja të mundshme të blerjes ruhen në një server në internet. Vetëm disa bajt të dhënash gjurmimi ruhen në kompjuterin tuaj, që përmbajnë informacione për ju (ose më mirë, kompjuterin tuaj), në mënyrë që serveri i uebit të dijë se cili kosh është i juaji. Edhe me veçoritë e reja të HTML5, nuk ka nevojë të ndryshohet ky sistem - ai është i besueshëm, i sigurt dhe efikas.

Por ruajtja e të dhënave në server nuk është gjithmonë qasja më e mirë, sepse ndonjëherë është më e lehtë të ruash informacione jo thelbësore në kompjuterin e përdoruesit. Për shembull, ka kuptim që të ruhen cilësimet e përdoruesit (të themi, cilësimet që përcaktojnë se si shfaqet një faqe në internet) dhe gjendja e aplikacionit (një pamje e gjendjes aktuale të aplikacionit në internet) në nivel lokal, në mënyrë që vizitori të mund të vazhdojë ta ekzekutojë atë nga i njëjti vend më vonë. .

Përpara HTML5, mënyra e vetme për të ruajtur të dhënat në nivel lokal ishte përdorimi i mekanizmit të skedarëve. biskota, i cili fillimisht ishte krijuar për të shkëmbyer sasi të vogla informacioni identifikues midis serverëve të internetit dhe shfletuesve. Cookies janë ideale për ruajtjen e sasive të vogla të të dhënave, por modeli JavaScript për të punuar me to është pak i ngathët. Sistemi i cookie-ve gjithashtu e detyron zhvilluesin të merret me datat e skadencës dhe të dërgojë të dhëna të padobishme përpara dhe mbrapa nëpër internet me çdo kërkesë faqeje.

HTML5 prezanton një alternativë më të mirë për cookies, gjë që e bën të lehtë dhe të thjeshtë ruajtjen e informacionit në kompjuterin e një vizitori. Ky informacion mund të ruhet në kompjuterin e klientit për një kohë të pacaktuar, nuk dërgohet në serverin e uebit (përveç nëse zhvilluesi e bën vetë), mund të jetë i madh dhe kërkon vetëm disa objekte të thjeshta dhe efikase JavaScript për të punuar me të.

Kjo mundësi quhet ruajtja në ueb (ruajtje në ueb) dhe është veçanërisht i përshtatshëm për aplikacionet e internetit jashtë linje, si ju lejon të krijoni aplikacione të pavarura të pavarura që mund të ruajnë të gjithë informacionin që u nevojitet edhe kur nuk ka lidhje interneti.

Funksionaliteti i ruajtjes në ueb HTML5 lejon një faqe në internet të ruajë të dhëna në kompjuterin e vizitorit. Ky informacion mund të jetë afatshkurtër, i cili fshihet kur shfletuesi fiket, ose afatgjatë, i cili mbetet i disponueshëm në vizitat e mëvonshme në faqen e internetit.

Informacioni i ruajtur në ruajtje në ueb nuk ruhet në fakt në internet, por në kompjuterin e vizitorit të faqes në internet. Me fjalë të tjera, ruajtja në ueb nënkupton ruajtjen e të dhënave jo në internet, por ruajtjen e të dhënave nga Interneti.

Ekzistojnë dy lloje të ruajtjes në internet që lidhen me dy objekte në një mënyrë ose në një tjetër:

Magazinimi lokal

Përdor objektin ruajtja lokale për të ruajtur të dhëna për të gjithë faqen e internetit në mënyrë të vazhdueshme. Kjo do të thotë që nëse një faqe ueb ruan të dhëna në ruajtje lokale, ato të dhëna do të jenë të disponueshme për përdoruesin kur të kthehen në atë faqe interneti ditën tjetër, javën e ardhshme ose vitin e ardhshëm.

Natyrisht, shumica e shfletuesve i ofrojnë përdoruesit gjithashtu mundësinë për të pastruar hapësirën lokale. Zbatohet si një strategji gjithçka ose asgjë në disa shfletues dhe heq të gjitha të dhënat lokale, ashtu si hiqen kukit. (Në fakt, në disa shfletues, sistemi i kukive dhe ruajtja lokale janë të ndërlidhura, kështu që mënyra e vetme për të fshirë të dhënat lokale është fshirja e skedarëve të personalizimit.) Dhe shfletues të tjerë mund t'i ofrojnë përdoruesit mundësinë për të parë të dhënat për çdo uebsajt individual dhe për të fshirë të dhëna për sitin ose faqet e zgjedhura.

Ruajtja e të dhënave të sesionit

Përdor objektin Ruajtja e sesioneve për të ruajtur përkohësisht të dhëna për një dritare ose skedë të vetme të shfletuesit. Këto të dhëna janë të disponueshme vetëm derisa përdoruesi të mbyllë dritaren ose skedën, në atë moment sesioni përfundon dhe të dhënat fshihen. Por të dhënat e sesionit ruhen nëse përdoruesi lundron në një faqe tjetër interneti dhe më pas kthehet, për sa kohë që ndodh në të njëjtën dritare të shfletuesit.

Nga pikëpamja e kodit të faqes së internetit, ruajtja lokale dhe ruajtja e të dhënave të sesionit funksionojnë saktësisht në të njëjtën mënyrë. Dallimi është vetëm në kohëzgjatjen e ruajtjes së të dhënave.

Përdorimi i ruajtjes lokale ofron mundësinë më të mirë për të ruajtur informacionin e kërkuar për vizitat e mëvonshme në faqen e internetit nga përdoruesi. Dhe ruajtja e sesioneve përdoret për të ruajtur të dhënat që duhet të transferohen nga një faqe në tjetrën. (Ruajtja e sesionit mund të ruajë gjithashtu të dhëna të përkohshme të përdorura vetëm në një faqe, por variablat normale JavaScript funksionojnë mirë për këtë qëllim.)

Si ruajtja lokale, ashtu edhe ruajtja e sesioneve lidhen me domenin e një faqe interneti. Kështu, nëse i ruani të dhënat për faqen www..html në ruajtjen lokale, këto të dhëna do të jenë të disponueshme për faqen www..html, sepse të dyja këto faqe kanë të njëjtin domen. Por këto të dhëna nuk do të jenë të disponueshme për faqet e domeneve të tjera.

Përveç kësaj, që nga ruajtja në ueb ndodhet në kompjuterin (ose pajisjen celulare) të këtij përdoruesi, është e lidhur me këtë kompjuter dhe një faqe ueb e hapur në këtë kompjuter dhe që ruan të dhëna në hapësirën e tij lokale të ruajtjes nuk ka qasje në informacionin që ka ruajtur. në një kompjuter tjetër. Në mënyrë të ngjashme, një faqe në internet krijon hapësirë të veçantë ruajtjeje lokale nëse identifikoheni me një emër përdoruesi të ndryshëm ose hapni një shfletues tjetër.

Megjithëse specifikimi HTML5 nuk vendos ndonjë rregull të fortë dhe të shpejtë në lidhje me sasinë maksimale të ruajtjes, shumica e shfletuesve e kufizojnë atë në 5 MB. Shumë të dhëna mund të paketohen në këtë sasi, por nuk do të jetë e mjaftueshme nëse dëshironi të përdorni memorien lokale për optimizimin e performancës dhe të ruani imazhe ose video të mëdha në të (dhe, për të thënë të vërtetën, ruajtja lokale nuk është menduar për të tilla qëllime).

Për ruajtjen e sasive të mëdha të të dhënave, një standard bazë të dhënash ende në zhvillim Indeksuar DB lejon hapësirë lokale shumë më të madhe - zakonisht 50 MB për të filluar, dhe më shumë nëse përdoruesi është dakord.

Ruajtja e të dhënave

Përpara se një pjesë e informacionit të vendoset në ruajtjen lokale ose të sesionit, duhet t'i jepet një emër përshkrues. Ky emër quhet çelës (çelës) dhe është i nevojshëm që të dhënat të mund të merren në të ardhmen.

Sintaksa për ruajtjen e një pjese të të dhënave është si më poshtë:

localStorage = të dhëna;

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

Sigurisht, ruajtja e një pjese të tekstit statik nuk ka kuptim. Si rregull, ne duhet të ruajmë një lloj të dhënash të ndryshueshme, të tilla si data aktuale, rezultati i një llogaritjeje matematikore ose të dhëna teksti të futura nga përdoruesi në fushat e formularit. Më poshtë është një shembull i ruajtjes së të dhënave tekstuale të futura nga përdoruesi:

Ruajtja në ueb Ky tekst do të ruhet në ruajtjen lokale:
Ky tekst do të ruhet në ruajtjen e të dhënave të sesionit:

Funksioni saveData() ( // Merrni vlerat e fushës së tekstit Var localData = document.getElementById("localData"). vlera; var sessionData = dokument. getElementById("sessionData"). vlera; // Ruani tekstin e futur në fusha e tekstit në ruajtjen lokale localStorage["localData"] = localData; // Ruajeni tekstin e futur në fushën e tekstit në sesionin e ruajtjes së sesionitStorage["sessionData"] = sessionData; ) funksioni loadData() ( // Ngarko të dhënat e ruajtura nga depozitat var localData = localStorage ["localData"]; var sessionData = sesionStorage["sessionData"]; // Shfaqni këto të dhëna në fushat e tekstit nëse (localData != null) (dokument.getElementById("localData").value = localData ; ) if (sessionData ! = null) ( document.getElementById("sessionData").value = sessionData; ) )

Faqja përmban dy fusha teksti: një për ruajtjen lokale (lart) dhe një për ruajtjen e sesioneve (poshtë). Klikimi i butonit "Ruaj" ruan tekstin e futur në fushat e tekstit dhe klikimi i butonit "Ngarko" shfaq të dhënat përkatëse të ruajtura në fusha.

Ruajtja në ueb gjithashtu mbështet sintaksën më pak të zakonshme të pronave. Sipas rregullave të kësaj sintakse, ne i referohemi vendndodhjes së ruajtjes me emrin emri i përdoruesit si localStorage.username, jo localStorage["username"]. Të dy llojet e sintaksës janë ekuivalente, dhe përdorimi i njërës ose tjetrës është një çështje e preferencës personale.

Ruajtja në ueb nuk funksionon pa një server në internet

Në kërkimin tuaj të ruajtjes në ueb, mund të hasni në një problem të papritur. Në shumë shfletues, ruajtja në ueb funksionon vetëm për faqet e ofruara nga serveri i uebit. Nuk ka rëndësi se ku ndodhet serveri, në internet ose në kompjuterin tuaj, gjëja më e rëndësishme është thjesht që faqet të mos hapen nga hard disku lokal (për shembull, duke klikuar dy herë në ikonën e skedarit të faqes) .

Kjo veçori është një efekt anësor i mënyrës se si shfletuesit ndajnë hapësirën për ruajtjen lokale. Siç u diskutua më parë, shfletuesit kufizojnë hapësirën ruajtëse lokale për faqe interneti në 5 MB, gjë që kërkon që ata të lidhin çdo faqe që dëshiron të përdorë hapësirën ruajtëse lokale me domenin e sajtit.

Pra, çfarë ndodh nëse hapni një faqe që përdor hapësirën ruajtëse në ueb nga hard disku juaj lokal? E gjitha varet nga shfletuesi. Internet Explorer duket se po humbet plotësisht mbështetjen për ruajtjen në ueb. Objektet localStorage dhe sessionStorage zhduken dhe përpjekja për t'i përdorur ato shkakton një gabim JavaScript.

Në shfletuesin Firefox, objektet localStorage dhe sessionStorage mbeten në vend dhe duket se mbështeten (madje edhe Modernizr përcakton se çfarë mbështetet), por gjithçka që dërgohet në ruajtje zhduket dhe askush nuk e di se ku. Në shfletuesin Chrome, përsëri, diçka është e ndryshme - shumica e funksioneve të ruajtjes në ueb funksionojnë siç duhet, por disa veçori (për shembull, ngjarja onStorage) nuk funksionojnë.

Probleme të ngjashme lindin me përdorimin e File API. Prandaj, do t'i kurseni vetes shumë telashe nëse e vendosni faqen që po testoni në një server testimi për të shmangur të gjitha këto pasiguri.

Mbështetje për ruajtjen e uebit nga shfletuesit

Ruajtja në ueb është një nga veçoritë më të mbështetura të HTML5, me një nivel të mirë mbështetjeje në çdo shfletues kryesor. Tabela më poshtë rendit versionet minimale të shfletuesve kryesorë që mbështesin ruajtjen në ueb:

Të gjithë këta shfletues ofrojnë ruajtje lokale dhe ruajtje të të dhënave të sesionit. Por mbështetja për ngjarjen onStorage kërkon shfletues të mëvonshëm si IE 9, Firefox 4 ose Chrome 6.

Versioni më problematik është IE 7, i cili nuk e mbështet fare ruajtjen në ueb. Si një zgjidhje, ju mund të imitoni hapësirën ruajtëse në ueb duke përdorur kuki. Nuk është saktësisht një zgjidhje perfekte, por funksionon. Ndërsa nuk ka asnjë skript zyrtar për të mbyllur këtë boshllëk, disa pika të mira fillestare mund të gjenden në faqen HTML5 Cross Browser (nën "Ueb Storage").