Mehanizam localStorage pruža vrstu objekta web pohrane koji vam omogućuje pohranjivanje i dohvaćanje podataka u pregledniku. Možete pohraniti i pristupiti podacima bez isteka; podaci će biti dostupni čak i nakon što posjetitelj zatvori vašu stranicu.
Obično ćete pristupati localStorageu koristeći JavaScript. S malom količinom koda možete izgraditi ogledni projekt, poput brojača rezultata. Ovo će pokazati kako možete pohraniti i pristupiti trajnim podacima koristeći samo kod na strani klijenta.
Što je localStorage u JavaScriptu?
Objekt localStorage dio je API-ja za web pohranu koji podržava većina web preglednika. Podatke možete pohraniti kao parove ključ-vrijednost koristeći localStorage. Jedinstveni ključevi i vrijednosti trebaju biti u UTF-16 DOM formatu niza.
Ako želite pohraniti objekte ili nizove, morat ćete ih pretvoriti u nizove koristeći JSON.stringify() metoda. Možete pohraniti do 5 MB podataka u localStorage. Također, svi prozori s istim izvorom mogu dijeliti lokalne podatke tog mjesta za pohranu.
Preglednik neće izbrisati ove podatke čak ni kada ga korisnik zatvori. Bit će dostupan web-mjestu koje ga je izradilo tijekom svake buduće sesije. Međutim, ne biste trebali koristiti localStorage za osjetljive podatke budući da im druge skripte koje se izvode na istoj stranici mogu pristupiti.
localStorage vs. sessionStorage
The localStorage i sessionStorage objekti dio su API-ja web pohrane koji lokalno pohranjuje parove ključ-vrijednost. Svi moderni preglednici podržavaju oboje. Uz localStorage, podaci ne ističu čak ni nakon što korisnik zatvori svoj preglednik. Ovo se razlikuje od sessionStoragea koji briše podatke kada sesija stranice završi. Sesija stranice završava kada zatvorite karticu ili prozor.
Kod korišten u ovom projektu dostupan je u a GitHub spremište i besplatan je za korištenje pod MIT licencom. Ako želite pogledati live verziju projekta brojača rezultata, možete pogledati uživo demo.
Kako radi localStorage?
Funkcionalnosti localStorage možete pristupiti putem Window.localStorage vlasništvo. Ovo svojstvo nudi nekoliko metoda kao što su setItem(), getItem() i removeItem(). Možete ih koristiti za pohranjivanje, čitanje i brisanje parova ključ/vrijednost.
Kako pohraniti podatke u localStorage
Možete pohraniti podatke u localStorage pomoću setItem() metoda. Ova metoda prihvaća dva argumenta, ključ i odgovarajuću vrijednost.
window.localStorage.setItem('Piton', 'Guido van Rossum');Ovdje, Piton je ključ i Guido van Rossum je vrijednost. Ako želite pohraniti polje ili objekt, morat ćete ga pretvoriti u niz. Možete pretvoriti niz ili objekt u niz koristeći JSON.stringify() metoda.
prozor.localStorage.setItem('Python', 'Guido van Rossum');konst student = {
ime: "Yuvraj",
oznake: 85,
predmet: "Strojno učenje"
}
konst rezultati = [76, 77, 34, 67, 88];
prozor.localStorage.setItem('rezultat', JSON.stringify (učenik));
prozor.localStorage.setItem('oznake', JSON.nizati (rezultati));
Kako čitati podatke iz localStorage
Možete čitati podatke iz localStorage pomoću getitem() metoda. Ova metoda prihvaća ključ kao parametar i vraća vrijednost kao niz.
neka podaci1 = prozor.localStorage.getItem('Python');
neka podaci2 = prozor.localStorage.getItem('rezultat');
konzola.log (podaci1);
konzola.log (podaci2);
Ovo proizvodi sljedeći izlaz:
Guido van Rossum
{"Ime":"Yuvraj","oznake":85,"subjekt":"Strojno učenje"}Ako želite pretvoriti rezultat iz niza u objekt, trebali biste koristiti JSON.parse() metoda.
neka podaci2 = JSON.parse(prozor.localStorage.getItem('rezultat'));
konzola.log (podaci2);Kako izbrisati sesije localStorage
Možete izbrisati sesije localStorage pomoću uklonitiStavku() metoda. Morate proslijediti ključ kao parametar ovoj metodi da biste izbrisali par ključ-vrijednost. Ako ključ postoji, metoda će izbrisati par ključ-vrijednost, a ako ključ ne postoji, metoda neće učiniti ništa.
window.localStorage.removeItem('Piton');
window.localStorage.removeItem('C++');Kako izbrisati sve stavke u localStorage
Možete izbrisati sve stavke u lokalnoj pohrani pomoću čisto() metoda. Ne morate proslijediti nikakve parametre ovoj metodi.
prozor.localStorage.čisto();Kako pronaći duljinu localStorage
Možete pronaći duljinu localStorage pomoću localStorage.length vlasništvo.
neka len = localStorage.length;
konzola.log (len);Kako doći do ključa na određenom mjestu
Možete dobiti ključ na određenoj poziciji pomoću ključ() metoda. Ova metoda prihvaća indeks kao parametar.
neka d = localStorage.key(1);
konzola.log (d);Metoda key() prvenstveno se koristi za prolazak kroz sve stavke u localStorageu.
Kako proći kroz sve stavke u localStorage
Možete iterirati po svim stavkama u localStorage koristeći for petlju.
za (neka ja = 0; i < localStorage.length; i++){
neka ključ = localStorage.key (i);
neka vrijednost = localStorage.getItem (ključ);
konzola.log (ključ, vrijednost);
}Metoda key() prihvaća indeks kao argument i vraća odgovarajući ključ. Metoda getItem() prihvaća ključ kao argument i vraća odgovarajuću vrijednost. Na kraju, konzola.log() metoda ispisuje par ključ-vrijednost.
Jednostavan JavaScript projekt temeljen na localStorageu
Uz razumijevanje njegovih osnovnih metoda, možete se razvijati jednostavan JavaScript projekt na temelju localStorage. U ovom projektu izradit ćete aplikaciju za brojanje rezultata koja će povećavati i smanjivati broj bodova prema kliku na gumb. Također ćete implementirati funkcionalnost za brisanje svih stavki u localStorageu.
Stvorite index.html i skripta.js datoteku u novu mapu i otvorite datoteke u svom omiljenom uređivaču koda. Koristite sljedeći HTML kôd za izradu sučelja za aplikaciju brojača rezultata:
<!DOCTYPE html>
<html>
<tijelo>
<h1>localStorage u JavaScriptu</h1>
<gumb onclick="povećatiBrojač()" vrsta="dugme">Povećaj rezultat</button>
<gumb onclick="smanjiBrojač()" vrsta="dugme">Smanji rezultat</button>
<gumb onclick="clearCounter()" vrsta="dugme">Obriši lokalnu pohranu</button>
<str>Postići:</str>
<p id="postići"></str>
<str>Klikni na "Povećaj rezultat" gumb za povećanje broja bodova</str>
<str>Klikni na "Smanji rezultat" gumb za smanjenje broja bodova</str>
<str>Klikni na "Obriši lokalnu pohranu" gumb za brisanje localStorage</str>
<str>
Možete zatvoriti karticu preglednika (ili prozor), i probati opet.
Vidjet ćete da podaci još uvijek postoje ijene izgubio čak i nakon zatvaranja
preglednik.
</str>
<skripta src="skripta.js"></script>
</body>
</html>Ova stranica sadrži tri gumba: Povećaj rezultat, Smanji rezultat, i Obriši lokalnu pohranu. Ovi gumbi pozivaju povećatiBrojač(), smanjiBrojač(), i clearCounter() funkcije odnosno. Upotrijebite sljedeći kôd za dodavanje funkcionalnosti aplikaciji za brojanje rezultata pomoću JavaScripta.
funkcijapovećatiBrojač() {
var brojati = Broj(prozor.localStorage.getItem("count"));
brojati += 1;
window.localStorage.setItem("računati", brojanje);
document.getElementById("postići").innerHTML = broj;
}The povećatiBrojač() funkcija dohvaća broj pomoću getItem() metode. Pretvara rezultat u broj jer getItem() vraća niz i pohranjuje ga u varijablu brojanja.
Prvi put kada kliknete na Povećaj rezultat gumb će biti prije bilo kojeg poziva setItem(). Vaš preglednik neće pronaći računati ključ u localStorage, tako da će vratiti nultu vrijednost. Budući da funkcija Number() vraća 0 za nulti unos, nije potrebno posebno rukovanje malim i malim slovima. Kod može sigurno povećati vrijednost brojača prije nego što ga pohrani i ažurira dokument za prikaz nove vrijednosti.
funkcijasmanjiBrojač() {
var brojati = Broj(prozor.localStorage.getItem("count"));
brojati -= 1;
window.localStorage.setItem("računati", brojanje);
document.getElementById("postići").innerHTML = broj;
}The smanjiBrojač() funkcija dohvaća i provjerava podatke baš kao povećatiBrojač() radi. Smanjuje računati varijabla za 1, koja je zadana vrijednost 0.
funkcijaclearCounter() {
prozor.localStorage.čisto();
document.getElementById("postići").unutarnjiHTML = "";
}Posljednje, clearCounter() funkcija briše sve podatke iz localStorage pomoću čisto() metoda.
Učinite više uz localStorage
Objekt localStorage ima nekoliko metoda uključujući setItem(), getItem(), removeItem() i clear(). Iako je localStorage jednostavan za korištenje, nije sigurno pohranjivati osjetljive informacije. Ali to je dobar izbor za razvoj projekata koji ne zahtijevaju puno prostora za pohranu i ne uključuju nikakve osjetljive podatke.
Želite li izgraditi još jedan JavaScript projekt temeljen na localStorage? Ovo je osnovna aplikacija za popis obaveza koju možete razviti pomoću HTML-a, CSS-a i JavaScripta.