Sīkfailu vietējā krātuve. Vietējā krātuve. Pamata CRUD darbības ar vietējo krātuvi

Web apskats Uzglabāšana

Internetā informāciju var glabāt divās vietās: tīmekļa serverī un tīmekļa klientā (t.i., lapas apmeklētāja datorā). Dažus datu veidus vislabāk glabāt vienā no šīm vietām, bet citus datus citā.

Pareizā vieta konfidenciālu un svarīgu datu glabāšanai ir tīmekļa serveris. Piemēram, ja tiešsaistes veikalā pievienojat preces iepirkumu grozam, dati par jūsu iespējamo pirkumu tiek saglabāti tīmekļa serverī. Jūsu datorā tiek saglabāti tikai daži baiti izsekošanas datu, kas satur informāciju par jums (vai drīzāk par jūsu datoru), lai tīmekļa serveris zinātu, kurš grozs ir jūsu. Pat ar jaunajām HTML5 funkcijām šī sistēma nav jāmaina – tā ir uzticama, droša un efektīva.

Taču datu glabāšana serverī ne vienmēr ir labākā pieeja, jo... Dažkārt ir vieglāk saglabāt nebūtisku informāciju lietotāja datorā. Piemēram, ir lietderīgi lokāli saglabāt lietotāja preferences (piemēram, iestatījumus, kas nosaka, kā tiek renderēta tīmekļa lapa) un lietojumprogrammas stāvokli (momentuzņēmums pašreizējais stāvoklis tīmekļa lietojumprogramma), lai apmeklētājs varētu turpināt to palaist no tā paša punkta vēlāk.

Pirms HTML5 vienīgais ceļš vietējā datu krātuve izmantoja failu mehānismu cepumi, kas sākotnēji bija paredzēts neliela apjoma identificējošas informācijas apmaiņai starp tīmekļa serveriem un pārlūkprogrammām. Sīkfaili ir ideāli piemēroti neliela datu apjoma glabāšanai, taču JavaScript modelis darbam ar tiem ir nedaudz neērts. Sīkdatņu sistēma arī liek izstrādātājam meklēt derīguma termiņus un nevajadzīgi sūtīt datus internetā un atpakaļ ar katru lapas pieprasījumu.

HTML5 tas ir ievadīts labākā alternatīva sīkdatnes, kas ļauj ērti un vienkārši uzglabāt informāciju apmeklētāja datorā. Šī informācija var tikt saglabāta klienta dators neierobežotu laiku, netiek nosūtīts uz tīmekļa serveri (ja vien izstrādātājs to nedara pats), var būt liela izmēra, un darbam ir nepieciešami tikai daži vienkārši, efektīvi JavaScript objekti.

Šo funkciju sauc tīmekļa krātuve un ir īpaši piemērots lietošanai ar bezsaistes režīmā vietņu darbs, jo ļauj izveidot autonomas bezsaistes lietojumprogrammas, kas var saglabāt visu nepieciešamo informāciju pat tad, ja nav interneta savienojuma.

HTML5 tīmekļa krātuves funkcionalitāte ļauj tīmekļa lapai saglabāt datus apmeklētāja datorā. Šī informācija var būt īstermiņa, kas tiek dzēsta, izslēdzot pārlūkprogrammu, vai ilgtermiņa, kas paliek pieejama turpmākajos tīmekļa lapas apmeklējumos.

Tīmekļa krātuvē saglabātā informācija faktiski netiek glabāta internetā, bet gan tīmekļa lapas apmeklētāja datorā. Citiem vārdiem sakot, tīmekļa krātuve nozīmē datu glabāšanu nevis internetā, bet gan datu glabāšanu no interneta.

Ir divu veidu tīmekļa krātuves, kas kaut kādā veidā ir saistītas ar diviem objektiem:

Izmanto objektu vietējā krātuve lai saglabātu datus par visu vietni pastāvīgs pamats. Tas nozīmē, ka, ja tīmekļa lapa saglabā datus vietējā krātuvē, šie dati būs pieejami lietotājam, kad viņš atgriezīsies šajā tīmekļa lapā nākamajā dienā, nākamajā nedēļā vai nākamajā gadā.

Protams, lielākā daļa pārlūkprogrammu nodrošina lietotājam arī iespēju notīrīt vietējo krātuvi. Dažas pārlūkprogrammas to īsteno kā stratēģiju “viss vai neko” un dzēš visus vietējos datus, līdzīgi kā tiek dzēsti sīkfaili. (Patiesībā dažās pārlūkprogrammās sīkfailu sistēma un lokālā krātuve ir savstarpēji saistītas, tāpēc vienīgais veids, kā dzēst vietējos datus, ir dzēst sīkfailus.) Citas pārlūkprogrammas var ļaut lietotājam skatīt datus par katru atsevišķu vietni un dzēst datus atlasītā vietne vai vietnes.

Izmanto objektu sessionStorageīslaicīgai datu glabāšanai vienam pārlūkprogrammas logam vai cilnei. Šie dati ir pieejami tikai līdz brīdim, kad lietotājs aizver logu vai cilni, pēc kura sesija beidzas un dati tiek izdzēsti. Taču sesijas dati tiek saglabāti, ja lietotājs dodas uz citu vietni un pēc tam atgriežas vēlreiz, ja vien tas notiek tajā pašā pārlūkprogrammas logā.

No tīmekļa lapas koda viedokļa gan vietējā krātuve, gan sesijas datu glabāšana darbojas tieši tāpat. Vienīgā atšķirība ir datu glabāšanas ilgums.

Vietējās krātuves izmantošana nodrošina vislabāko iespēju saglabāt nepieciešamo informāciju, lai lietotājs turpmāk varētu apmeklēt tīmekļa lapu. Un sesiju veikals tiek izmantots, lai uzglabātu datus, kas jāpārsūta no vienas lapas uz otru. (Sesiju krātuvē var saglabāt arī pagaidu datus, kas tiek izmantoti tikai vienā lapā, taču parastie JavaScript mainīgie šim nolūkam darbojas lieliski.)

Gan vietējā krātuve, gan sesijas krātuve ir saistītas ar vietnes domēnu. Tādējādi, ja saglabājat datus lapai www..html lokālajā krātuvē, šie dati būs pieejami lapai www..html, jo abām šīm lapām ir viens domēns. Taču šie dati nebūs pieejami lapām citos domēnos.

Turklāt, jo tīmekļa krātuve atrodas jūsu datorā (vai mobila ierīce) dotajam lietotājam, tas ir saistīts ar šo datoru, un tīmekļa lapa tika atvērta šo datoru un glabā datus savā lokālajā krātuvē, nav piekļuves informācijai, ko tas ir saglabājis citā datorā. Tāpat tīmekļa lapa izveido atsevišķu lokālo krātuvi, ja piesakāties ar citu lietotājvārdu vai izmantojat citu pārlūkprogrammu.

Lai gan HTML5 specifikācijā nav noteikti stingri un ātri noteikumi attiecībā uz maksimālo krātuvi, lielākā daļa pārlūkprogrammu ierobežo to līdz 5 MB. Šajā sējumā varat ievietot daudz datu, taču ar to nepietiks, ja vēlaties izmantot vietējo krātuvi veiktspējas optimizēšanai un tajā saglabāt lielu daudzumu attēlu vai videoklipu (un, patiesībā, vietējā krātuve nav paredzēta tādiem nolūkiem).

Liela datu apjoma glabāšanai, joprojām attīstās datu bāzes standarts IndexedDBļauj lokāli glabāt daudz lielākas summas – parasti sākumā 50 MB un vairāk, ja lietotājs tam piekrīt.

Datu saglabāšana

Pirms informācijas daļu var ievietot vietējā vai sesijas krātuvē, tai ir jāpiešķir aprakstošs nosaukums. Šo nosaukumu sauc par atslēgu, un tas ir nepieciešams, lai datus varētu izgūt nākotnē.

Datu daļas saglabāšanas sintakse ir šāda:

localStorage = dati;

// JS localStorage["lietotājvārds"] = "Ivans Petrovs";

Protams, saglabāt statiskā teksta fragmentu nav jēgas. Parasti mums ir jāsaglabā daži mainīgi dati, piemēram, pašreizējais datums, matemātiskā aprēķina rezultāts vai teksta dati, ko lietotājs ievadījis veidlapas laukos. Šis ir lietotāja ievadīto teksta datu saglabāšanas piemērs:

Funkcija saveData() ( // Iegūstiet teksta lauku vērtības var localData = document.getElementById("localData").value; var sessionData = document.getElementById("sessionData").value; // Saglabājiet ievadīto tekstu teksta laukā vietējā krātuvē localStorage["localData"] = localData; // Saglabājiet teksta laukā ievadīto tekstu sesijas krātuvē sessionStorage["sessionData"] = sessionData; ) funkcija loadData() ( // Ielādēt saglabātos datus no krātuves var localData = localStorage ["localData"]; var sessionData = sessionStorage["sessionData"]; // Parādīt šos datus teksta laukos if (localData != null) ( document.getElementById("localData").value = localData ; ) if (sessionData ! = null) ( document.getElementById("sessionData").value = sessionData; ) )

Lapā ir divi teksta lauki: vietējai krātuvei (augšpusē) un sesijas krātuvei (apakšā). Noklikšķinot uz pogas "Saglabāt", tiek saglabāts teksta laukos ievadītais teksts, un, noklikšķinot uz pogas "Ielādēt", laukos tiek parādīti attiecīgie saglabātie dati.

Tīmekļa krātuve atbalsta arī mazāk izplatīto īpašuma sintaksi. Saskaņā ar šīs sintakses noteikumiem krātuves vietu ar nosaukumu lietotājvārds mēs apzīmējam kā vietējaisStorage.username, nevis localStorage["lietotājvārds"]. Abi sintakses veidi ir līdzvērtīgi, un viena vai otra izmantošana ir personīgās izvēles jautājums.

Tīmekļa krātuve nedarbojas bez tīmekļa servera

Veicot tīmekļa krātuves izpēti, var rasties neparedzēta problēma. Daudzās pārlūkprogrammās tīmekļa krātuve darbojas tikai tīmekļa servera nodrošinātajām lapām. Neatkarīgi no tā, kur atrodas serveris, internetā vai jūsu datorā, vissvarīgākais ir tas, ka lapas netiek palaistas no vietējā cietais disks(piemēram, veicot dubultklikšķi uz lapas faila ikonas).

Šī funkcija ir blakusefekts tam, kā pārlūkprogrammas piešķir vietējo krātuves vietu. Kā minēts iepriekš, pārlūkprogrammas ierobežo katras vietnes lokālo krātuvi līdz 5 MB, tādēļ tām ir jāsaista katra lapa, kas vēlas izmantot vietējo krātuvi, ar vietnes domēnu.

Tātad, kas notiek, ja no vietējā cietā diska atverat lapu, kurā tiek izmantota tīmekļa krātuve? Tas viss ir atkarīgs no pārlūkprogrammas. Interneta pārlūkprogrammaŠķiet, ka Explorer pilnībā zaudē tīmekļa krātuves atbalstu. LocalStorage un sessionStorage objekti pazūd, un mēģinājums tos izmantot izraisa JavaScript kļūdu.

IN Firefox pārlūks lokālaisStorage un sessionStorage objekti paliek savās vietās un it kā tiek atbalstīti (pat Modernizr nosaka, ka tiek atbalstīti), bet viss, kas tiek nosūtīts uz krātuvi, pazūd Dievs zina, kur. IN Chrome pārlūks atkal kaut kas cits - lielākā daļa tīmekļa krātuves funkcionalitātes darbojas kā nākas, bet dažas iespējas (piemēram, onStorage notikums) nedarbojas.

Līdzīgas problēmas rodas, izmantojot failu API. Tādējādi jūs ietaupīsit sevi no daudzām grūtībām, ja testējamo lapu ievietosit testa serverī, lai izvairītos no visām šīm neskaidrībām.

Pārlūka atbalsts tīmekļa krātuvei

Tīmekļa krātuve ir viena no visvairāk atbalstītajām HTML5 funkcijām ar labu atbalsta līmeni katrā lielākajā pārlūkprogrammā. Tālāk esošajā tabulā ir norādītas minimālās versijas galvenajām pārlūkprogrammām, kas atbalsta tīmekļa krātuvi.

Visas šīs pārlūkprogrammas nodrošina lokālās krātuves un sesiju datu uzglabāšanas iespējas. Taču, lai atbalstītu notikumu onStorage, ir nepieciešamas jaunākas pārlūkprogrammu versijas, piemēram, IE 9, Firefox 4 vai Chrome 6.

Visproblemātiskākā versija ir IE 7, kas vispār neatbalsta tīmekļa krātuvi. Kā risinājumu varat atdarināt tīmekļa krātuvi, izmantojot sīkfailus. Tas nav gluži ideāls risinājums, bet tas darbojas. Lai gan nav oficiāla skripta šīs nepilnības novēršanai, dažus labus sākumpunktus var atrast HTML5 Cross Browser lapā (sadaļā “Tīmekļa krātuve”).

The Web Storage API nodrošina mehānismus, ar kuriem pārlūkprogrammas var saglabāt atslēgu/vērtību pārus daudz intuitīvāk nekā izmantojot sīkfailus.

Web krātuves koncepcijas un lietojums

Divi mehānismi tīmekļa krātuvē ir šādi:

• sessionStorage uztur atsevišķu krātuves apgabalu katram norādītajam izcelsmei, kas ir pieejams lapas sesijas laikā (kamēr pārlūkprogramma ir atvērta, ieskaitot lapas atkārtotu ielādi un atjaunošanu).
  • Saglabā datus tikai par sesiju, kas nozīmē, ka dati tiek glabāti līdz pārlūkprogrammas (vai cilnes) aizvēršanai.
  • Dati nekad netiek pārsūtīti uz serveri.
  • Krātuves ierobežojums ir lielāks par sīkfailu (ne vairāk kā 5 MB).
• LocalStorage dara to pašu, taču saglabājas pat tad, kad pārlūkprogramma tiek aizvērta un atkārtoti atvērta.
  • Saglabā datus bez derīguma termiņa, un tie tiek notīrīti, tikai izmantojot JavaScript vai pārlūkprogrammas kešatmiņas / lokāli saglabāto datu notīrīšanu.
  • Krātuves ierobežojums ir maksimālais no trim.

Specifikācijas

Pārlūkprogrammu saderība

Window.localStorage

https://github.com/mdn/browser-compat-data un nosūtiet mums izvilkšanas pieprasījumu.

Leģenda

Window.sessionStorage

Saderības tabula šajā lapā ir ģenerēta no strukturētiem datiem. Ja vēlaties sniegt ieguldījumu datu apkopošanā, lūdzu, skatiet vietni https://github.com/mdn/browser-compat-data un nosūtiet mums izvilkšanas pieprasījumu.

Atjauniniet saderības datus vietnē GitHub

Leģenda

Privāta pārlūkošana / inkognito režīmi

Lielākā daļa mūsdienu pārlūkprogrammu atbalsta konfidencialitātes opciju ar nosaukumu "Inkognito", "Privātā pārlūkošana" vai kaut kas līdzīgs, kas nesaglabā datus, piemēram, vēsturi un sīkfailus. Tas acīmredzamu iemeslu dēļ nav saderīgs ar tīmekļa krātuvi. Tādējādi pārlūkprogrammu pārdevēji eksperimentē ar dažādām metodēm. scenāriji, kā risināt šo nesaderību.

Lielākā daļa pārlūkprogrammu ir izvēlējušās stratēģiju, kurā uzglabāšanas API joprojām ir pieejamas un šķietami pilnībā funkcionē, ​​ar vienu lielu atšķirību, ka visi saglabātie dati tiek izdzēsti pēc pārlūkprogrammas aizvēršanas. Šīm pārlūkprogrammām joprojām ir dažādas interpretācijas par to, kas jādara ar esošajiem saglabātajiem datiem (no parastās pārlūkošanas sesijas). Vai tai jābūt pieejamai lasīšanai privātajā režīmā? Turklāt dažas pārlūkprogrammas, īpaši Safari, ir izvēlējušās risinājumu, kurā ir pieejama krātuve, taču tā ir tukša un tām ir piešķirta 0 baitu kvota, tādējādi faktiski nav iespējams tajā ierakstīt datus.

Izstrādātājiem ir jāzina šīs dažādās ieviešanas iespējas un jāņem tās vērā, izstrādājot vietnes atkarībā no tīmekļa krātuves API. Lai iegūtu papildinformāciju, lūdzu, skatiet šo WHATWG emuāra ziņu, kas īpaši attiecas uz šo tēmu.

Tulkojums: Vlads Merževičs

Pastāvīga lokālā krātuve ir viena no jomām, kur klientu lietojumprogrammām ir priekšrocības salīdzinājumā ar servera lietojumprogrammām. Tādiem lietojumiem kā operētājsistēma, nodrošina abstrakcijas slāni datu, piemēram, iestatījumu vai izpildes statusa, glabāšanai un izgūšanai. Šīs vērtības var tikt saglabātas reģistrā, INI failos, XML failos vai citur atkarībā no platformas principiem. Ja jūsu klienta lietojumprogrammai ir nepieciešama vietējā krātuve ne tikai atslēgas/vērtības pārim, varat ievietot savu datu bāzi, izdomāt savu faila formātu vai citus risinājumus.

Vēsturiski tīmekļa lietojumprogrammām nav bijusi neviena no šīm greznībām. Sīkfaili tika izgudroti agrīnā interneta vēsturē, un tos var izmantot, lai pastāvīgi uzglabātu nelielu datu apjomu lokāli. Bet tiem ir trīs iespējamie trūkumi:

• Sīkfaili ir iekļauti katrā HTTP pieprasījumā, tādējādi palēninot jūsu tīmekļa lietojumprogrammu, nevajadzīgi pārsūtot vienus un tos pašus datus atkal un atkal;
• sīkfaili tiek iekļauti katrā HTTP pieprasījumā, pārsūtot datus internetā nešifrētā veidā (pat ja visa tīmekļa lietojumprogramma tiek pārraidīta, izmantojot SSL);
• Sīkfailu apjoms ir ierobežots līdz aptuveni 4 KB datu — pietiekami, lai palēninātu lietojumprogrammas darbību (skatiet iepriekš), taču nepietiek, lai tās būtu noderīgas.

Lūk, ko mēs patiešām vēlamies:

• daudz vietas uzglabāšanai;
• darbs klienta pusē;
• ņemt vērā lapu atsvaidzināšanu;
• nav sūtīšanas uz serveri.

Pirms HTML5 visi mēģinājumi to panākt galu galā dažādos veidos neizdevās.

Īsa vietējās krātuves vēsture pirms HTML5

Sākumā bija tikai viens Internet Explorer. Vismaz tā Microsoft vēlējās, lai pasaule domā. Šim nolūkam Pirmās ietvaros Lielais karš pārlūkprogrammas Microsoft izgudroja daudzas lietas un iekļāva tās savā pārlūkprogrammā Internet Explorer, kas beidzās karš. Viena no šīm lietām tika saukta par DHTML uzvedību, un viena no darbībām tika saukta par userData.

UserData ļauj tīmekļa lapai saglabāt līdz 64 KB datu katrā domēnā hierarhiskā XML līdzīgā struktūrā. Uzticami domēni, piemēram, iekštīkla vietnes, var saglabāt desmit reizes vairāk. Un hei, ar 640 KB vajadzētu pietikt visiem. IE nav nodrošinājis nekādu veidu, kā mainīt šīs konvencijas, tāpēc nav iespējams palielināt pieejamās atmiņas apjomu.

2002. gadā Adobe ieviesa Flash 6 funkciju, kas bija neveiksmīga un ar maldinošu nosaukumu “Flash Cookies”. IN Flash videšī iespēja ir labāk pazīstama kā vietējie koplietotie objekti (LSO). Īsāk sakot, tas ļauj Flash objektiem saglabāt līdz 100 KB datu katrā domēnā. Breds Neubergs, kurš izstrādāja agrīnu Flash un JavaScript tilta prototipu, to nosauca par AMASS (AJAX Massive Storage System), taču to ierobežoja daži Flash dizaina sarežģījumi. Līdz 2006. gadam, ieviešot ārējo saskarni Flash 8, piekļuve LSO, izmantojot JavaScript, kļuva par daudz vienkāršāku un ātrāku. Breds pārrakstīja AMASS un integrēja to populārajā Dojo Toolkit ar aizstājvārdu dojox.storage. Flash katram domēnam piešķir 100 kb krātuvi “bez maksas”. Turklāt tas piedāvā lietotājam pēc pieprasījuma palielināt atmiņas apjomu par lielumu (1 MB, 10 MB utt.).

if (Modernizr.localstorage) (
// window.localStorage ir pieejama!
) cits (
// nav vietējā atbalsta HTML5 krātuvei
}

Izmantojot HTML5 krātuvi

HTML5 krātuve ir balstīta uz atslēgu/vērtību pāru nosaukumiem. Jūs saglabājat informāciju, pamatojoties uz atslēgas nosaukumu, un pēc tam varat izgūt šos datus ar to pašu atslēgu. Atslēgas nosaukums ir virkne. Dati var būt jebkura veida, ko atbalsta JavaScript, tostarp virknes, Būla vērtības, veseli skaitļi vai peldošā komata skaitļi. Tomēr patiesībā dati tiek saglabāti kā virkne. Ja glabājat un izgūstat virknes, kas nav virknes, jums būs jāizmanto tādas funkcijas kā parseInt() vai parseFloat(), lai pārvērstu saņemtos datus pareizajos JavaScript veidos.

Krātuves interfeiss (
Saņemt, izmantojot getItem(atslēga);
Iestatīt, izmantojot setItem(atslēga, dati);
};

Izsaucot setItem() ar esošu atslēgas nosaukumu, iepriekšējā vērtība tiks klusi pārrakstīta. Izsaucot getItem() ar neeksistējošu atslēgu, tiks atgriezts NULL, nevis izņēmums.

Tāpat kā citiem JavaScript objektiem, jūs varat piekļūt localStorage objektam kā asociatīvam masīvam. Tā vietā, lai izmantotu metodes getItem() un setItem(), varat vienkārši norādīt kvadrātiekavas. Piemēram, šis koda fragments

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

var pārrakstīt, izmantojot kvadrātiekavās sintaksi:

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

Ir arī metodes vērtību dzēšanai pēc atslēgas nosaukuma, kā arī visa veikala notīrīšanai (tas ir, visu taustiņu un vērtību dzēšanai vienlaikus).

Krātuves interfeiss (
Noņemt, izmantojot RemoveItem(atslēga);
skaidrs ();
}

Izsaucot removeItem() ar neesošu atslēgu, nekas netiks atgriezts.

Visbeidzot, ir rekvizīts, lai iegūtu kopējo vērtību skaitu krātuves apgabalā un atkārtotu visas atslēgas pēc indeksa (iegūst katras atslēgas nosaukumu).

Krātuves interfeiss (
garums
Iegūt atslēgu (nenegatīvs vesels skaitlis);
}

Ja, izsaucot taustiņu (), indekss neatrodas diapazonā no 0 līdz (garums-1), funkcija atgriezīs null .

HTML5 krātuves apgabala uzraudzība

Ja vēlaties programmatiski izsekot krātuves izmaiņas, jums ir jānoķer krātuves notikums. Šis notikums notiek loga objektā, kad tiek izsaukti setItem() , removeItem() vai clear() un tie kaut ko maina. Piemēram, ja esat instalējis esošo vērtību vai izsaukts clear(), ja nav taustiņu, notikums netiks aktivizēts, jo krātuves apgabals faktiski nav mainījies.

Krātuves notikums tiek atbalstīts visur, kur darbojas localStorage objekts, tostarp pārlūkprogrammā Internet Explorer 8. IE 8 neatbalsta W3C addEventListener standartu (lai gan tas beidzot tiks pievienots IE 9), tāpēc, lai noķertu krātuves notikumu, ir jāpārbauda, ​​kurš notikumu dzinējs atbalsta to pārlūkprogrammu (ja esat to darījis iepriekš ar citiem notikumiem, varat pāriet uz šīs sadaļas beigām). Krātuves notikuma pārtveršana darbojas tāpat kā citu notikumu pārtveršana. Ja vēlaties izmantot jQuery vai kādu citu JavaScript bibliotēku, lai reģistrētu notikumu apstrādātājus, varat to izdarīt arī ar krātuvi.

if (window.addEventListener) (
window.addEventListener("krātuve", hand_storage, false);
) cits (
window.attachEvent("onstorage", hand_storage);
};

Hand_storage atzvanīšana tiks izsaukta ar objektu StorageEvent, izņemot pārlūkprogrammā Internet Explorer, kur notikumi tiek glabāti failā window.event .

funkcija hand_storage(e) (
if (!e) ( e = logs.notikums; )
}

Šajā gadījumā mainīgais e būs StorageEvent objekts, kuram ir šādas noderīgas īpašības.

*Piezīme: URL rekvizīts sākotnēji tika saukts par uri, un dažas pārlūkprogrammas atbalstīja šo rekvizītu pirms specifikācijas mainīšanas. Lai nodrošinātu maksimālu saderību, pārbaudiet, vai url rekvizīts pastāv, un, ja tā nav, pārbaudiet uri rekvizītu.

Krātuves notikumu nevar atcelt, un nav iespējams apturēt izmaiņas hand_storage atzvanīšanas ietvaros. Tas ir tikai veids, kā pārlūkprogramma jums saka: “Ei, tas tikko notika. Jūs neko nevarat darīt, es tikai gribēju, lai jūs zināt."

Ierobežojumi pašreizējās pārlūkprogrammās

Runājot par vietējās krātuves vēsturi, izmantojot trešo pušu spraudņus, es minēju katras tehnikas ierobežojumus. Atcerējos, ka neko neteicu par tagad standarta HTML5 krātuves ierobežojumiem. Es jums sniegšu atbildes un pēc tam tās paskaidrošu. Atbildes svarīguma secībā ir "5 megabaiti", "QUOTA_EXCEEDED_ERR" un "nav".

“5 megabaiti” — cik daudz atmiņas tiek nodrošināts pēc noklusējuma. Šī vērtība ir pārsteidzoši konsekventa visās pārlūkprogrammās, lai gan HTML5 specifikācijā tā ir norādīta tikai kā ieteikums. Jums jāsaprot, ka jūs glabājat virknes, nevis datus sākotnējā formātā. Ja saglabājat daudz veselu skaitļu vai peldošā komata skaitļu, attēlojuma atšķirība var būt liela. Katrs cipars peldošā komata skaitļā tiek saglabāts kā rakstzīme, nevis parastajā šādu skaitļu attēlojumā.

“QUOTA_EXCEEDED_ERR” ir izņēmums, ko saņemsit, ja pārsniegsiet 5 MB kvotu. “Nē” ir atbilde uz nākamo acīmredzamo jautājumu: “Vai es varu lūgt lietotājam vairāk vietas krātuvē?” Rakstīšanas laikā pārlūkprogrammās nav ieviests neviens mehānisms, lai tīmekļa izstrādātāji varētu pieprasīt papildu krātuves vietu. Dažas pārlūkprogrammas (piemēram, Opera) ļauj lietotājam kontrolēt krātuves kvotas katrai vietnei, taču tā ir tikai lietotāja iniciatīva un nav saistīta ar neko, ko jūs kā izstrādātājs varat iebūvēt savā tīmekļa lietojumprogrammā.

HTML5 krātuve darbībā

Apskatīsim HTML5 krātuvi darbībā. Atkal pievērsīsimies tam, ko izveidojām nodaļā par zīmēšanu. Šai spēlei ir neliela problēma: ja spēles vidū aizverat pārlūkprogrammas logu, jūs zaudēsiet rezultātus. Bet, izmantojot HTML5 krātuvi, mēs varam saglabāt spēles procesu lokāli, pašā pārlūkprogrammā. Atveriet demonstrāciju, veiciet dažas kustības, aizveriet pārlūkprogrammas cilni un pēc tam atveriet to vēlreiz. Ja jūsu pārlūkprogramma atbalsta HTML5 krātuvi, demonstrācijas lapa maģiski atcerēsies precīzu pozīciju spēlē, tostarp jūsu veikto gājienu skaitu, katras figūras pozīciju uz galda un pat atlasīto figūru.

Kā tas strādā? Katru reizi, kad spēlē notiek izmaiņas, mēs izsauksim šo funkciju.

funkcija saveGameState() (

localStorage["halma.game.in.progress"] = gGameInProgress;
for (var i = 0; i< kNumPieces; i++) {
localStorage["halma.piece." + i + ".rinda"] = gDabiņi[i].rinda;
localStorage["halma.piece." + i + ".kolonna"] = ggabali[i].kolonna;
}
localStorage["halma.selectedpiece"] = gSelectedPieceIndex;
localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
localStorage["halma.movecount"] = gMoveCount;
atgriezt patiesu;
}

Kā redzat, spēles gaitas saglabāšanai tiek izmantots objekts localStorage (gGameInProgress, Būla tips). Pēc tam visas daļas (gPieces, JavaScript masīvs) tiek atkārtotas, un katrai no tām tiek saglabāta rinda un kolonna. Pēc tam tiek saglabāti daži papildu spēles stāvokļi, tostarp atlasītā figūra (gSelectedPieceIndex, vesels skaitlis), figūra, kas atrodas garas lēcienu sērijas vidū (gSelectedPieceHasMoved, Būla vērtība) un kopējais skaits veiktās kustības (gMoveCount, vesels skaitlis).

Kad lapa tiek ielādēta, tā vietā, lai automātiski izsauktu funkciju newGame(), kas atgrieztu visiem mainīgajiem to sākotnējās vērtības, mēs izsaucam resumeGame() . Funkcija resumeGame() izmanto HTML5 krātuvi, lai pārbaudītu spēles stāvokli vietējā krātuvē. Ja ir, tas atjauno vērtības, izmantojot lokālo krātuves objektu.

funkcija resumeGame() (
if (!supportsLocalStorage()) (atgriezt false; )
gGameInProgress = (localStorage["halma.game.in.progress"] == "true");
if (!gGameInProgress) (atgriezt false; )
gPieces = new Masīvs(kNumDaces);
for (var i = 0; i< kNumPieces; i++) {
var row = parseInt(localStorage["halma.gabals." + i + ".rinda"]);
var kolonna = parseInt(localStorage["halma.gabals." + i + ".kolonna"]);
gPieces[i] = new Cell(rinda, kolonna);
}
gNumPieces = kNumPieces;
gSelectedPieceIndex = parseInt(localStorage["halma.selectedpiece"]);
gSelectedPieceHasMoved = localStorage["halma.selectedpiecehasmoved"] == "true";
gMoveCount = parseInt(localStorage["halma.movecount"]);
Drawboard();
atgriezt patiesu;
}

Šīs funkcijas vissvarīgākā daļa ir brīdinājums, ko es minēju iepriekš šajā nodaļā un atkārtošu šeit: dati tiek saglabāti kā virknes. Ja glabājat kaut ko citu, nevis virknes, jums tās būs jāpārvērš, kad tās saņemsiet. Piemēram, karodziņam, ka notiek spēle (gGameInProgress), ir Būla tips. Funkcijā saveGameState() mēs to vienkārši saglabājam un neuztraucamies par datu tipu.

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

Bet funkcijā resumeGame() mums ir jāaplūko no vietējās krātuves izgūtā vērtība kā virkne un manuāli jākonstruē sava Būla vērtība.

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

Līdzīgi gājienu skaits tiek saglabāts gMoveCount kā vesels skaitlis, funkcijā saveGameState() mēs to vienkārši saglabājam.

localStorage["halma.movecount"] = gMoveCount;

Bet funkcijā resumeGame () mums ir jāpārvērš vērtība par veselu skaitli, izmantojot JavaScript iebūvēto funkciju parseInt ().

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

Pāri atslēgas/vērtības pāriem: konkurētspējīgs redzējums

Lai gan vēstures gaitā ir bijuši daudzi triki un risinājumi, pašreizējais HTML5 krātuves stāvoklis ir pārsteidzoši veselīgs. Jaunā API ir standartizēta un iekļauta visās lielākajās pārlūkprogrammās, platformās un ierīcēs. Tīmekļa izstrādātājam tas nav nekas, ko jūs redzat katru dienu, vai ne? Bet tas ir vairāk nekā "5 megabaiti atslēgu/vērtību pāru", un pastāvīgas lokālās krātuves nākotne ir... kā lai saka... nu, pieņemsim, ka tā ir konkurētspējīga vīzija.

Viena vīzija ir akronīms, ko jūs jau zināt - SQL. 2007. gadā Google izlaida Gears — atvērtā koda vairāku pārlūkprogrammu spraudni, kas ietver iebūvētu uz SQLite balstītu datubāzi. Šis agrīnais prototips vēlāk ietekmēja Web SQL datu bāzes specifikācijas izveidi. Tīmekļa SQL datu bāze (iepriekš zināma kā WebDB) nodrošina datu bāzei plānu apvalku SQL dati, kas ļauj veikt šādas darbības no JavaScript:

openDatabase("dokumenti", "1.0", "Vietējā dokumentu krātuve", 5*1024*1024, funkcija (db) (
db.changeVersion("", "1.0", funkcija (t) (
t.executeSql("IZVEIDOT TABULAS docids (id, nosaukums)");
), kļūda);
});

Kā redzat, lielākā daļa darbību notiek saskaņā ar ExecuteSQL metodi. Šī virkne var atbalstīt jebkuru SQL komandu, tostarp SELECT, UPDATE, INSERT un DELETE. Tas ir tieši tāpat servera programmēšana datubāzēm, izņemot to, ka darāt to ar JavaScript! Ak prieks!

Web SQL datu bāzes specifikācija ir ieviesta četrās pārlūkprogrammās un platformās.

Protams, ja savā dzīvē esat izmantojis vairāk nekā vienu datu bāzi, jūs zināt, ka "SQL" ir vairāk mārketinga termins, nevis stingrs un ātrs standarts (daži varētu teikt to pašu par HTML5, bet tam nav nozīmes) . Protams, pastāv pašreizējā SQL specifikācija (saukta par SQL-92), taču pasaulē nav neviena datu bāzes servera, kas atbilstu tikai šai specifikācijai. Ir Oracle SQL, Microsoft SQL, SQL MySQL, SQL PostgreSQL, SQL SQLite. Faktiski katrs no šiem produktiem laika gaitā pievieno jaunu SQL funkcionalitāti, tāpēc nepietiek pat ar vārdiem "SQL in SQLite". Jums vajadzētu teikt "SQL versija, kas nāk ar SQLite versiju X.Y.Z".

Tas viss mūs noved pie nākamās atrunas, kas pašlaik ir ievietota Web SQL specifikācijas augšdaļā.

Specifikācija ir nonākusi strupceļā: visi ieinteresētie izstrādātāji izmanto servera puses SQL (SQLite), taču mums ir nepieciešamas vairākas neatkarīgas ieviešanas, lai virzītos uz standartizāciju. Lai gan citi izstrādātāji ir ieinteresēti šīs specifikācijas ieviešanā, SQL dialekta apraksts ir atstāts tikai kā atsauce uz Sqlite, kas standartam nav pieņemams.

Uz šī fona es jums pastāstīšu par citu konkurētspējīgu redzējumu par progresīvu, pastāvīgu vietēju tīmekļa lietojumprogrammu krātuvi: indeksētās datu bāzes API, kas agrāk bija pazīstama kā "WebSimpleDB", tagad mīļi saukta par IndexedDB.

Indeksētās datu bāzes API nodrošina tā saukto objektu krātuvi, un daudzas idejas ir aizgūtas no SQL datu bāzēm. Ir "datu bāzes" ar "ierakstiem", katram ierakstam ir noteikts "lauku" skaits. Katram laukam ir noteikts datu tips, kas tiek noteikts, veidojot datu bāzi. Varat atlasīt ierakstu apakškopu un pēc tam uzskaitīt tos ar "kursoru". Izmaiņas objektu veikalā tiek apstrādātas ar "transakcijām".

Ja kādreiz esat programmējis SQL datu bāzes, šie termini, iespējams, jums ir pazīstami. Galvenā atšķirība ir tā, ka objektu krātuvei nav strukturētas vaicājumu valodas. Jūs nedrīkstat rakstīt nosacījumu, piemēram, "ATLASĪT * no LIETOTĀJIEM, kur ACTIVE = "Y"". Tā vietā mēs izmantojam objektu veikala nodrošinātās metodes, lai atvērtu datu bāzi USERS, uzskaitītu ierakstus, filtrētu savus ierakstus un izmantotu piekļuves metodes, lai iegūtu katra atlikušo ierakstu lauka vērtību. Agrīna IndexedDB apskate ir laba apmācība par to, kā darbojas IndexedDB un kā IndexedDB tiek salīdzināts ar Web SQL.

Rakstīšanas laikā IndexedDB tika ieviests tikai Firefox 4 beta versijā. Turpretim Mozilla ir paziņojis, ka nekad neieviesīs Web SQL. Google ir paziņojusi, ka apsver IndexedDB atbalstu Chromium un Google Chrome. Un pat Microsoft teica, ka IndexedDB ir "lielisks risinājums tīmeklim".

Ko jūs varat darīt kā tīmekļa izstrādātājs, izmantojot IndexedDB? Šobrīd gandrīz nekas, izņemot dažas tehnoloģiju demonstrācijas. Gada laikā? Var būt.

Pēdējā atjaunināšana: 1.11.2015

Lai gan sīkfaili ļauj saglabāt informāciju, tiem ir noteikti ierobežojumi. Piemēram, pārlūkprogrammai ir ierobežojumi sīkfailu izmēram – katrs sīkfails nedrīkst pārsniegt 4 KB. Sīkdatnēm ir derīguma termiņš, pēc kura tās tiek dzēstas. Sīkfaili ir neatņemama HTTP protokola funkcija un tiek nosūtīti kopā ar pieprasījumu serverim ar katru pieprasījumu serverim. Tomēr darbam ar sīkfailiem klienta pusē javascript kodā nav nozīmes tam, vai sīkfaili tiek nodoti serverim. Turklāt, lai izgūtu saglabātos sīkfailus, jums ir jāievada kods.

Tāpēc tika ieviests HTML5 jauna koncepcija datu glabāšanai - tīmekļa krātuve. Tīmekļa krātuve sastāv no diviem komponentiem: sesijas krātuves un vietējās krātuves.

Sesijas krātuve ir informācijas pagaidu glabāšana, kas tiek dzēsta pēc pārlūkprogrammas aizvēršanas.

Vietējā krātuve ir pastāvīga datu krātuve. Dati no vietējās krātuves netiek automātiski izdzēsti, un tiem nebeidzas derīguma termiņš. Šie dati netiek nosūtīti serverim HTTP pieprasījumā. Turklāt vietējās krātuves apjoms pārlūkprogrammās Chrome un Firefox ir 5 MB domēnam, bet IE - 10 MB.

Visi tīmekļa krātuvē esošie dati ir atslēgu un vērtību pāru kopa. Tas nozīmē, ka katram objektam ir unikāls atslēgas nosaukums un noteikta vērtība.

Lai strādātu ar lokālo krātuvi JavaScript, tiek izmantots objekts localStorage, bet darbam ar sesijas krātuvi tiek izmantots objekts sessionStorage.

Lai saglabātu datus, vietējāStorage objekta metodei setItem() ir jānodod tālāk norādītais:

LocalStorage.setItem("pieteikšanās", " [aizsargāts ar e-pastu]");

Šai metodei tiek nodotas divas vērtības: atslēga un saglabājamā objekta vērtība.

Ja localStorage jau ir objekts ar atslēgu "login", tad tā vērtība tiek aizstāta ar jaunu.

Lai iegūtu saglabātos datus, jums ir jāizsauc metode getItem():

Var login = localStorage.getItem("pieteikšanās"); // [aizsargāts ar e-pastu]

Objekta atslēga tiek nodota šai metodei.

Lai noņemtu objektu, izmantojiet metodi removeItem(), kas ņem noņemamā objekta atslēgu:

LocalStorage.removeItem("pieteikšanās");

Un priekš pilnīga noņemšana no visiem objektiem no localStorage varat izmantot clear() metodi:

LocalStorage.clear();

Vienkāršu objektu saglabāšana ir vienkārša, taču jāņem vērā, ka vietējāStorage dati tiek saglabāti kā virkne:

LocalStorage.setItem("vecums", 23); var vecums = localStorage.getItem("vecums"); vecums=parseInt(vecums)+10; dokuments.rakstīt(vecums); //33

Ja šajā gadījumā vērtību nepārveidosit par skaitli, izmantojot parseInt(), vecums darbosies kā virkne.

Grūtības var rasties, saglabājot sarežģītus objektus:

Var lietotājs =( vārds: "Toms", vecums: 23, precējies: viltus ); localStorage.setItem("lietotājs", lietotājs); var savedUser = localStorage.getItem("lietotājs"); document.write(savedUser); // document.write(savedUser.name); // undefined - savedUser ir virkne, nevis objekts

Šajā gadījumā mums ir jāizmanto serializācija JSON formātā:

Var lietotājs =( vārds: "Toms", vecums: 23, precējies: viltus ); localStorage.setItem("lietotājs", JSON.stringify(lietotājs)); var savedUser = JSON.parse(localStorage.getItem("lietotājs")); document.write(savedUser.name + " " + savedUser.age +" " + savedUser.married); //Toms 23 nepatiess