Mecanismul localStorage oferă un tip de obiect de stocare web care vă permite să stocați și să preluați date în browser. Puteți stoca și accesa date fără expirare; datele vor fi disponibile chiar și după ce un vizitator vă închide site-ul.
În mod normal, veți accesa localStorage folosind JavaScript. Cu o cantitate mică de cod, puteți construi un proiect exemplu, cum ar fi un contor de scor. Acest lucru va arăta cum puteți stoca și accesa date persistente folosind doar codul clientului.
Ce este localStorage în JavaScript?
Obiectul localStorage face parte din API-ul de stocare web pe care îl acceptă majoritatea browserelor web. Puteți stoca date ca perechi cheie-valoare folosind localStorage. Cheile și valorile unice ar trebui să fie în formatul UTF-16 DOM String.
Dacă doriți să stocați obiecte sau matrice, va trebui să le convertiți în șiruri de caractere folosind JSON.stringify() metodă. Puteți stoca până la 5 MB de date în localStorage. De asemenea, toate ferestrele cu aceeași origine pot partaja datele de stocare locale ale site-ului respectiv.
Un browser nu va șterge aceste date chiar și atunci când un utilizator le închide. Acesta va fi disponibil pentru site-ul web care l-a creat în timpul oricărei sesiuni viitoare. Cu toate acestea, nu ar trebui să utilizați localStorage pentru date sensibile, deoarece alte scripturi care rulează pe aceeași pagină le pot accesa.
LocalStorage vs. sesiuneStorage
The localStorage și sessionStorage obiectele fac parte din API-ul Web Storage care stochează local perechi cheie-valoare. Toate browserele moderne le acceptă pe ambele. Cu localStorage, datele nu expiră nici după ce un utilizator își închide browserul. Aceasta diferă de sessionStorage, care șterge datele atunci când sesiunea de pagină se termină. O sesiune de pagină se încheie când închideți o filă sau o fereastră.
Codul folosit în acest proiect este disponibil în a Depozitul GitHub și este gratuit pentru utilizare sub licența MIT. Dacă doriți să aruncați o privire la o versiune live a proiectului de contor de scoruri, puteți verifica live demonstrație.
Cum funcționează LocalStorage?
Puteți accesa funcționalitatea localStorage prin intermediul Window.localStorage proprietate. Această proprietate oferă mai multe metode precum setItem(), getItem() și removeItem(). Le puteți folosi pentru a stoca, citi și șterge perechile cheie/valoare.
Cum să stocați datele în localStorage
Puteți stoca date în localStorage folosind setItem() metodă. Această metodă acceptă două argumente, cheia și valoarea corespunzătoare.
window.localStorage.setItem('Piton', 'Guido van Rossum');Aici, Piton este cheia și Guido van Rossum este valoarea. Dacă doriți să stocați o matrice sau un obiect, va trebui să îl convertiți într-un șir. Puteți converti o matrice sau un obiect într-un șir folosind JSON.stringify() metodă.
fereastră.localStorage.setItem('Python', 'Guido van Rossum');const student = {
nume: "Yuvraj",
note: 85,
subiect: „Învățare automată”
}
const scoruri = [76, 77, 34, 67, 88];
fereastră.localStorage.setItem('rezultat', JSON.stringe (elev));
fereastră.localStorage.setItem('marks', JSON.stringify (scoruri));
Cum să citiți datele din localStorage
Puteți citi datele din localStorage folosind getItem() metodă. Această metodă acceptă cheia ca parametru și returnează valoarea ca șir.
lăsa data1 = fereastră.localStorage.getItem('Python');
lăsa data2 = fereastră.localStorage.getItem('rezultat');
consolă.log (data1);
consolă.log (data2);
Aceasta produce următoarea ieșire:
Guido van Rossum
{"Nume":"Yuvraj","semne":85,"subiect":"Învățare automată"}Dacă doriți să convertiți rezultatul dintr-un șir într-un obiect, ar trebui să utilizați JSON.parse() metodă.
lăsa data2 = JSON.analiza(fereastră.localStorage.getItem('rezultat'));
consolă.log (data2);Cum să ștergeți sesiunile de stocare locală
Puteți șterge sesiunile de stocare locală folosind removeItem() metodă. Trebuie să transmiteți cheia ca parametru acestei metode pentru a șterge perechea cheie-valoare. Dacă cheia există, metoda va șterge perechea cheie-valoare, iar dacă cheia nu există, metoda nu va face nimic.
window.localStorage.removeItem('Piton');
window.localStorage.removeItem('C++');Cum să ștergeți toate elementele din localStorage
Puteți șterge toate elementele din stocarea locală folosind clar() metodă. Nu trebuie să treceți niciun parametru acestei metode.
fereastră.LocalStorage.clar();Cum să găsiți lungimea stocării locale
Puteți găsi lungimea localStorage folosind localStorage.lungime proprietate.
lăsa len = localStorage.length;
consolă.log (len);Cum să obțineți cheia într-o poziție dată
Puteți obține cheia într-o anumită poziție folosind cheie() metodă. Această metodă acceptă indexul ca parametru.
lăsa d = localStorage.key(1);
consolă.log (d);Metoda key() este folosită în primul rând pentru a parcurge toate elementele din localStorage.
Cum să parcurgeți toate articolele din localStorage
Puteți itera peste toate elementele din localStorage folosind o buclă for.
pentru (lăsa i = 0; i < localStorage.length; i++){
lăsa cheie = localStorage.key (i);
lăsa valoare = localStorage.getItem (cheie);
consolă.log (cheie, valoare);
}Metoda key() acceptă indexul ca argument și returnează cheia corespunzătoare. Metoda getItem() acceptă cheia ca argument și returnează valoarea corespunzătoare. În cele din urmă, console.log() metoda imprimă perechea cheie-valoare.
Proiect JavaScript simplu bazat pe localStorage
Cu o înțelegere a metodelor sale de bază, vă puteți dezvolta un proiect JavaScript simplu bazat pe LocalStorage. În acest proiect, veți crea o aplicație de contorizare a scorurilor care va crește și reduce numărul de scoruri în funcție de un clic pe buton. De asemenea, veți implementa funcționalitatea pentru a șterge toate elementele din localStorage.
Creaza un index.html și script.js fișier într-un folder nou și deschideți fișierele în editorul de cod preferat. Utilizați următorul cod HTML pentru a crea o interfață pentru aplicația de contor de scor:
<!DOCTYPE html>
<html>
<corp>
<h1>localStorage în JavaScript</h1>
<butonul onclick="increaseCounter()" tip="buton">Creșteți scorul</button>
<butonul onclick="reduceCounter()" tip="buton">Reduceți scorul</button>
<butonul onclick="clearCounter()" tip="buton">Ștergeți stocarea locală</button>
<p>Scor:</p>
<p id="Scor"></p>
<p>Faceți clic pe "Creșteți scorul" butonul pentru a crește numărul de scor</p>
<p>Faceți clic pe "Reduceți scorul" butonul pentru a reduce numărul de scor</p>
<p>Faceți clic pe "Ștergeți stocarea locală" butonul pentru a goli stocarea locală</p>
<p>
Puteți închide fila browser (sau fereastră), și încerca din nou.
Veți vedea că datele persistă în continuare șiestenu pierdut chiar și după închidere
browserul.
</p>
<script src="script.js"></script>
</body>
</html>Această pagină conține trei butoane: Creșteți scorul, Reduceți scorul, și Ștergeți stocarea locală. Aceste butoane denumesc increaseCounter(), reduceCounter(), și clearCounter() respectiv funcţii. Utilizați următorul cod pentru a adăuga funcționalități la aplicația de contor de scoruri folosind JavaScript.
funcţiecreştereContor() {
var numără = Număr(fereastră.localStorage.getItem("număr");
numără += 1;
window.localStorage.setItem("numara", numara);
document.getElementById("Scor").innerHTML = numărare;
}The increaseCounter() funcția preia numărul folosind metoda getItem(). Convertește rezultatul într-un număr, deoarece getItem() returnează un șir și îl stochează în variabila count.
Prima dată când dați clic pe Creșteți scorul butonul va fi înainte de orice apel la setItem(). Browserul dvs. nu va găsi numara cheie în localStorage, deci va returna o valoare nulă. Deoarece funcția Number() returnează 0 pentru o intrare nulă, nu are nevoie de nicio tratare specială a cazurilor. Codul poate crește în siguranță valoarea numărului înainte de a-l stoca și de a actualiza documentul pentru a afișa noua valoare.
funcţiereduceCounter() {
var numără = Număr(fereastră.localStorage.getItem("număr");
numără -= 1;
window.localStorage.setItem("numara", numara);
document.getElementById("Scor").innerHTML = numărare;
}The reduceCounter() funcția preia și verifică datele exact ca increaseCounter() face. Decrementează numara variabilă cu 1, care este implicit 0.
funcţieclearCounter() {
fereastră.LocalStorage.clar();
document.getElementById("Scor").innerHTML = "";
}În sfârșit, cel clearCounter() funcția șterge toate datele din localStorage folosind funcția clar() metodă.
Faceți mai mult cu localStorage
Obiectul localStorage are mai multe metode, inclusiv setItem(), getItem(), removeItem() și clear(). Deși localStorage este ușor de utilizat, nu este sigur să stocați informații sensibile. Dar este o alegere bună pentru a dezvolta proiecte care nu necesită mult stocare și nu implică nicio informație sensibilă.
Doriți să construiți un alt proiect JavaScript bazat pe localStorage? Iată o aplicație de bază pentru lista de activități pe care o puteți dezvolta folosind HTML, CSS și JavaScript.