Web Storage

Pentru stocarea datelor în HTML5 se utilizează un API special - Web Storage API, care oferă acces la stocarea internă a browserului (web storage). Acest stocaj este compus din două componente: session storage și local storage.

Session storage reprezintă un depozit temporar de informații, care este șters după închiderea filei browserului.

Local storage reprezintă un depozit pentru date pe o bază permanentă. Datele din local storage nu sunt șterse automat și nu au o perioadă de expirare. Aceste date nu sunt transmise la server în cadrul cererii HTTP. În plus, capacitatea local storage în Chrome și Firefox este de 5 MB pe domeniu.

Toate datele în web storage sunt reprezentate sub formă de perechi cheie-valoare. Adică, fiecare obiect are un nume unic, cheia, și o valoare specifică.

Pentru lucrul cu local storage în JavaScript se utilizează obiectul localStorage, iar pentru session storage - obiectul sessionStorage. Ambele obiecte, din punct de vedere al API, sunt similare și oferă proprietăți și metode asemănătoare:

• length: conține numărul de elemente din stocare
• clear(): șterge toate elementele din stocare
• getItem(key): returnează un anumit element care are cheia key
• key(index): returnează cheia elementului care are indexul index
• removeItem(key): șterge elementul cu cheia key
• setItem(key, value): stabilește pentru elementul cu cheia key valoarea value

Dacă un element cu cheia key există deja în stocare, valoarea acestuia este rescrisă. Dacă elementul nu există, este adăugat.

Salvarea datelor

Pentru salvarea datelor în stocare se utilizează metoda setItem(key, value), în care se transmite cheia și valoarea elementului. Este important de ținut cont de faptul că doar șirurile de caractere pot fi salvate ca valori. De exemplu:

localStorage.setItem("email", "tom32@gmail.com");
sessionStorage.setItem("username", "Tom Smith");

În acest caz, în localStorage este salvat elementul cu cheia "email" și valoarea "tom32@gmail.com", iar în sessionStorage este salvat elementul cu cheia "username" și valoarea "Tom Smith".

În unele browsere, folosind unelte speciale, putem vedea obiectele salvate în local storage și session storage. De exemplu, în Google Chrome putem deschide uneltele pentru dezvoltatori și naviga la tab-ul Application. Și apoi, în partea stângă, selectăm opțiunea Storage->Local storage sau Session storage.

Dacă valoarea salvată nu este un șir de caractere, ci un alt tip, această valoare este convertită într-un șir de caractere folosind metoda toString(). De exemplu:

localStorage.setItem("age", 39);

Aici, valoarea este un număr, care înainte de salvare este convertit într-un șir de caractere.

Pot apărea dificultăți în salvarea obiectelor complexe:

const user ={
   name: "Tom",
   age: 23,
   isMarried: false
};

localStorage.setItem("user", user); // user = [object Object]

Aici încercăm să salvăm obiectul user. Cu toate acestea, când obiectul este convertit într-un șir de caractere, obținem [object Object].

În acest caz, pentru salvare, putem serializa obiectul în format JSON:

const user ={
   name: "Tom",
   age: 23,
   isMarried: false
};

localStorage.setItem("user", JSON.stringify(user));

Obținerea datelor

Pentru a obține datele salvate, trebuie să apelăm metoda getItem(), în care se transmite cheia obiectului:

// salvăm în local storage
localStorage.setItem("email", "tom32@gmail.com");
// obținem înapoi din local storage
const login = localStorage.getItem("login"); // tom32@gmail.com

Dacă au fost salvate date care nu sunt șiruri de caractere, atunci poate fi necesară conversia lor din șiruri de caractere în tipul original:

localStorage.setItem("age", 23);
// convertim în număr
let age = parseInt(localStorage.getItem("age"));
age += 1;
console.log(age); // 24

Dacă în acest caz nu convertim valoarea într-un număr folosind parseInt(), atunci age va acționa ca un șir de caractere.

Dacă obiectul reprezintă un obiect care înainte de salvare a fost convertit în json, atunci când este obținut înapoi poate fi parsat folosind metoda JSON.parse():

const tom ={
   name: "Tom",
   age: 23,
   isMarried: false
};

localStorage.setItem("user", JSON.stringify(tom));

// convertim în obiect
const user = JSON.parse(localStorage.getItem("user"));
console.log(user.name);  // Tom
console.log(user.age);  // 23
console.log(user.isMarried); // false

Ștergerea

Pentru a șterge un obiect, se folosește metoda removeItem(), care primește cheia obiectului ce trebuie șters:

localStorage.removeItem("email");

Și pentru ștergerea completă a tuturor obiectelor din localStorage se poate folosi metoda clear():

localStorage.clear();