Stocarea locală HTML, mai bine decât cookies - cookies .
Ce este HTML Local Storage?
Cu stocare locală, aplicatii web pot stoca date la nivel local în browserul utilizatorului.
Înainte de HTML5, datele aplicației a trebuit să fie stocate în cookies - cookies , incluse în fiecare cerere de server. stocare locală este mai sigur, și cantități mari de date pot fi stocate local, fără a afecta performanța site-ului.
Spre deosebire de cookies - (at least 5MB) cookies , limita de stocare este mult mai mare (at least 5MB) și informațiile nu sunt transferate pe server.
Stocare locală este pe origine (per domain and protocol) pentru (per domain and protocol) . Toate paginile, de la o origine, pot stoca și accesa aceleași date.
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin Stocare locală.
| API-ul | |||||
|---|---|---|---|---|---|
| Web Storage | 4 | 8 | 3.5 | 4 | 11.5 |
Obiecte HTML Stocare locală
stocare locală HTML oferă două obiecte pentru stocarea de date pe client:
- window.localStorage - stochează datele fără o dată de expirare
- window.sessionStorage stochează datele pentru o sesiune de date (se pierde atunci când fila browser - ul este închis) -
Înainte de a utiliza stocarea locală, verificați suportul pentru browser - ul localStorage și sessionStorage :
if(typeof(Storage) !== "undefined") {
// LocalStorage Obiectul Obiectul localStorage stochează datele fără o dată de expirare. Datele nu vor fi șterse atunci când browser-ul este închis, și va fi disponibil a doua zi, saptamana sau an.
Exemplu
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Încearcă - l singur » Exemplu explicat:
- Creați un localStorage nume / valoare pereche cu name="lastname" și value="Smith"
- Preluați valoarea "lastname" și introduceți - l în elementul cu id = „rezultat“
Exemplul de mai sus ar putea fi, de asemenea, scrie astfel:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname; Sintaxa pentru îndepărtarea "lastname" Articolul localStorage este după cum urmează:
localStorage.removeItem("lastname"); Notă: perechi nume / valoare sunt întotdeauna stocate ca siruri de caractere. Amintiți-vă pentru a le converti în alt format atunci când este necesar!
Următorul exemplu contorizează numărul de ori un utilizator a făcut clic pe un buton. În acest cod șirul de valoare este convertită la un număr să fie în măsură să crească contorul:
Exemplu
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s)."; Încearcă - l singur »
sessionStorage Obiectul
sessionStorage obiect este egal cu localStorage obiect, cu excepția faptului că stochează datele pentru o singură sesiune. Datele sunt șterse atunci când utilizatorul închide fila în browser-ul.
Următorul exemplu contorizează numărul de ori un utilizator a făcut clic pe un buton, în sesiunea curentă:
Exemplu
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
Încearcă - l singur »