Cum se stochează date în stocarea browserului web – LocalStorage și sessionStorage explicat

Pentru a gestiona datele gestionate de aplicația dvs. web, nu aveți neapărat nevoie de o bază de date. Funcțiile respective de stocare a browserului sunt acceptate de Chrome (versiunea 4 și versiuni ulterioare), Mozilla Firefox (versiunea 3.5 și versiuni ulterioare) și Internet Explorer (versiunea 8 și versiuni ulterioare) și o serie de alte browsere, inclusiv cele din iOS și Android.

Există două posibilități principale pentru stocarea browserului: localStorage și sessionStorage.

localStorage

Orice conținut / date salvate în localStorage obiectul va fi disponibil după repornirea browserului (închis și deschis din nou). Pentru a salvați un articol la localStorage, puteți utiliza metoda setItem(). Această metodă trebuie să primească o cheie și o valoare.

Example: localStorage.setItem("mykey","myvalue");

La preluați elementul din localStorage, metoda getItem trebuie sa fie folosit. getItem metodei trebuie să i se înmâneze cheia datelor pe care doriți să le extrageți:

  Example: localStorage.getItem("mykey");

Puteți elimina un articol din localStorage prin utilizarea removeItem() metodă. Această metodă trebuie să primească cheia articolului care urmează să fie eliminat:

  Example: localStorage.removeItem("mykey");

Pentru a șterge întregul localStorage, ar trebui să utilizați clear() metoda pe localStorage obiect:

  Example: localStorage.clear();

sessionStorage

Elemente salvate în sessionStorage obiectul va rămâne până când browserul este închis de utilizator. Apoi, stocarea va fi ștearsă.

Puteți salva un articol în sessionStorage, vă rugăm să utilizați metoda setItem() pe sessionStorage obiect:

Example: sessionStorage.setItem("mykey","myvalue");

La preluați elementul din sessionStorage, metoda getItem trebuie sa fie folosit. getItem metoda trebuie să fie înmânată cheia datelor pe care doriți să le extrageți:

  Example: sessionStorage.getItem("mykey");

Puteți elimina un articol din sessionStorage prin utilizarea removeItem() metodă. Această metodă trebuie să primească cheia articolului care urmează să fie eliminat:

  Example: sessionStorage.removeItem("mykey");

Pentru a șterge întregul sessionStorage, ar trebui să utilizați clear() metoda pe sessionStorage obiect:

  Example: sessionStorage.clear();

Salvarea matricilor în localStorage și sessionStorage

Nu puteți salva doar valori unice în localStorage și sessionStorage, dar puteți salva și conținutul unei matrice.

În acest exemplu, avem o matrice cu numere:

var ourArray =[1,2,3,4,5];

Acum îl putem salva în localStorage sau sessionStorage folosind setItem() metodă:

localStorage.setItem("ourarraykey",JSON.stringify(ourArray));

sau, pentru sessionStorage:

sessionStorage.setItem("ourarraykey",JSON.stringify(ourArray));

Pentru a fi salvat, matricea trebuie mai întâi convertită într-un șir. În exemplul prezentat mai sus, folosim JSON.stringify metoda de realizare a acestui lucru.

Când ne preluați datele din localStorage sau sessionStorage, convertiți-l înapoi la o matrice:

var storedArray = localStorage.getItem("ourarraykey");
ourArray = JSON.parse(storedArray);

sau, pentru sessionStorage:

var storedArray = sessionStorage.getItem("ourarraykey");
ourArray = JSON.parse(storedArray);