Mechanizmus localStorage poskytuje typ webového úložného objektu, ktorý vám umožňuje ukladať a získavať údaje v prehliadači. Údaje môžete ukladať a pristupovať k nim bez vypršania platnosti; údaje budú dostupné aj potom, čo návštevník zatvorí vašu stránku.
K localStorage bežne pristupujete pomocou JavaScriptu. S malým množstvom kódu môžete vytvoriť vzorový projekt, napríklad počítadlo skóre. To ukáže, ako môžete ukladať a pristupovať k trvalým údajom iba pomocou kódu na strane klienta.
Čo je localStorage v JavaScripte?
Objekt localStorage je súčasťou rozhrania API webového úložiska, ktoré podporuje väčšina webových prehliadačov. Údaje môžete uložiť ako páry kľúč – hodnota pomocou localStorage. Jedinečné kľúče a hodnoty by mali byť vo formáte UTF-16 DOM String.
Ak chcete ukladať objekty alebo polia, musíte ich previesť na reťazce pomocou JSON.stringify() metóda. Do localStorage môžete uložiť až 5 MB údajov. Všetky okná s rovnakým pôvodom môžu tiež zdieľať údaje localStorage danej lokality.
Prehliadač tieto údaje nevymaže, ani keď ho používateľ zavrie. Bude k dispozícii webovej stránke, ktorá ho vytvorila, počas každej budúcej relácie. Pre citlivé údaje by ste však nemali používať localStorage, pretože k nim majú prístup iné skripty spustené na tej istej stránke.
localStorage vs. sessionStorage
The localStorage a sessionStorage objekty sú súčasťou rozhrania Web Storage API, ktoré lokálne ukladá páry kľúč-hodnota. Všetky moderné prehliadače ich podporujú. S localStorage platnosť údajov nevyprší ani potom, čo používateľ zatvorí prehliadač. Toto sa líši od sessionStorage, ktorá vymaže údaje po skončení relácie stránky. Relácia stránky sa skončí, keď zatvoríte kartu alebo okno.
Kód použitý v tomto projekte je dostupný v a úložisko GitHub a môžete ho bezplatne používať na základe licencie MIT. Ak sa chcete pozrieť na živú verziu projektu počítadla skóre, môžete si ho pozrieť naživo demo.
Ako funguje localStorage?
K funkcii localStorage môžete pristupovať prostredníctvom Window.localStorage nehnuteľnosť. Táto vlastnosť poskytuje niekoľko metód ako setItem(), getItem() a removeItem(). Môžete ich použiť na ukladanie, čítanie a mazanie párov kľúč/hodnota.
Ako ukladať údaje do localStorage
Údaje môžete ukladať do localStorage pomocou setItem() metóda. Táto metóda akceptuje dva argumenty, kľúč a zodpovedajúcu hodnotu.
window.localStorage.setItem('Python', 'Guido van Rossum');Tu, Python je kľúčom a Guido van Rossum je hodnota. Ak chcete uložiť pole alebo objekt, budete ho musieť previesť na reťazec. Pole alebo objekt môžete previesť na reťazec pomocou JSON.stringify() metóda.
okno.localStorage.setItem('Python', 'Guido van Rossum');konšt študent = {
meno: "Yuvraj",
známky: 85,
predmet: "Strojové učenie"
}
konšt skóre = [76, 77, 34, 67, 88];
okno.localStorage.setItem('výsledok', JSON.stringify (žiak));
okno.localStorage.setItem('marks', JSON.stringify (skóre));
Ako čítať údaje z localStorage
Údaje z localStorage môžete čítať pomocou getItem() metóda. Táto metóda akceptuje kľúč ako parameter a vráti hodnotu ako reťazec.
nech údaje1 = okno.localStorage.getItem('Python');
nech údaje2 = okno.localStorage.getItem('výsledok');
konzoly.log (údaje1);
konzoly.log (údaje2);
To vytvára nasledujúci výstup:
Guido van Rossum
{"názov":"Yuvraj","známky":85,"predmet":"Strojové učenie"}Ak chcete previesť výsledok z reťazca na objekt, mali by ste použiť JSON.parse() metóda.
nech údaje2 = JSON.parse(okno.localStorage.getItem('výsledok'));
konzoly.log (údaje2);Ako odstrániť relácie localStorage
Relácie localStorage môžete odstrániť pomocou Odstrániť položku() metóda. Ak chcete odstrániť pár kľúč – hodnota, musíte do tejto metódy odovzdať kľúč ako parameter. Ak kľúč existuje, metóda vymaže pár kľúč – hodnota a ak kľúč neexistuje, metóda neurobí nič.
window.localStorage.removeItem('Python');
window.localStorage.removeItem('C++');Ako vymazať všetky položky v localStorage
Všetky položky v miestnom úložisku môžete vymazať pomocou jasný() metóda. Do tejto metódy nemusíte zadávať žiadny parameter.
okno.lokálny obchod.jasný();Ako zistiť dĺžku lokálneho úložiska
Dĺžku localStorage môžete nájsť pomocou localStorage.length nehnuteľnosť.
nech len = localStorage.length;
konzoly.log (len);Ako získať kľúč na danej pozícii
Kľúč na danú pozíciu získate pomocou kľúč() metóda. Táto metóda akceptuje index ako parameter.
nech d = localStorage.key(1);
konzoly.log (d);Metóda key() sa primárne používa na precyklenie všetkých položiek v localStorage.
Ako prechádzať všetky položky v miestnom úložisku
Môžete iterovať cez všetky položky v localStorage pomocou cyklu for.
pre (nech i = 0; i < localStorage.length; i++){
nech kľúč = localStorage.key (i);
nech hodnota = localStorage.getItem (kľúč);
konzoly.log (kľúč, hodnota);
}Metóda key() akceptuje index ako argument a vráti zodpovedajúci kľúč. Metóda getItem() akceptuje kľúč ako argument a vráti zodpovedajúcu hodnotu. Nakoniec, console.log() metóda vytlačí pár kľúč – hodnota.
Jednoduchý projekt JavaScript založený na localStorage
S pochopením jeho základných metód sa môžete rozvíjať jednoduchý projekt JavaScript založené na localStorage. V tomto projekte vytvoríte aplikáciu na počítadlo skóre, ktorá bude zvyšovať a znižovať počet skóre podľa kliknutia na tlačidlo. Tiež implementujete funkciu na vymazanie všetkých položiek v localStorage.
Vytvorte index.html a script.js súbor do nového priečinka a otvorte súbory vo svojom obľúbenom editore kódu. Na vytvorenie rozhrania pre aplikáciu počítadla skóre použite nasledujúci kód HTML:
<!DOCTYPE html>
<html>
<telo>
<h1>localStorage v JavaScripte</h1>
<button onclick="zvýšiťPočítadlo()" typ="tlačidlo">Zvýšte skóre</button>
<button onclick="zníženiePočítadlo()" typ="tlačidlo">Znížiť skóre</button>
<button onclick="clearCounter()" typ="tlačidlo">Vymazať localStorage</button>
<p>skóre:</str>
<p id="skóre"></str>
<p>Klikni na "Zvýšte skóre" tlačidlo na zvýšenie počtu bodov</str>
<p>Klikni na "Znížiť skóre" tlačidlo na zníženie počtu bodov</str>
<p>Klikni na "Vymazať localStorage" tlačidlo na vymazanie miestneho úložiska</str>
<p>
Môžete zavrieť kartu prehliadača (alebo okno), a skúste znova.
Uvidíte, že údaje stále pretrvávajú ajenie stratené aj po uzavretí
prehliadač.
</str>
<skript src="script.js"></script>
</body>
</html>Táto stránka obsahuje tri tlačidlá: Zvýšte skóre, Znížiť skóre, a Vymazať localStorage. Tieto tlačidlá volajú zvýšiťPočítadlo(), zníženiePočítadlo(), a clearCounter() funkcie resp. Použite nasledujúci kód na pridanie funkcií do aplikácie počítadla skóre pomocou JavaScriptu.
funkciuzvýšeniePočítadlo() {
var počítať = číslo(okno.localStorage.getItem("počet"));
počet += 1;
window.localStorage.setItem("počítať", počítať);
document.getElementById("skóre").vnutorneHTML = pocet;
}The zvýšiťPočítadlo() funkcia získa počet pomocou metódy getItem(). Skonvertuje výsledok na číslo, pretože getItem() vráti reťazec a uloží ho do premennej count.
Prvýkrát kliknete na Zvýšte skóre tlačidlo bude pred každým volaním funkcie setItem(). Váš prehliadač nenájde počítať kľúč v localStorage, takže vráti hodnotu null. Keďže funkcia Number() vracia 0 pre nulový vstup, nepotrebuje žiadne špeciálne spracovanie veľkých a malých písmen. Kód môže bezpečne zvýšiť hodnotu počtu pred jeho uložením a aktualizáciou dokumentu na zobrazenie novej hodnoty.
funkciuzníženiePočítadlo() {
var počítať = číslo(okno.localStorage.getItem("počet"));
počet -= 1;
window.localStorage.setItem("počítať", počítať);
document.getElementById("skóre").vnutorneHTML = pocet;
}The zníženiePočítadlo() funkcia načíta a skontroluje dáta rovnako ako zvýšiťPočítadlo() robí. Znižuje to počítať premenná o 1, predvolená hodnota je 0.
funkciuclearCounter() {
okno.lokálny obchod.jasný();
document.getElementById("skóre").vnútornéHTML = "";
}Posledná, clearCounter() funkcia vymaže všetky údaje z localStorage pomocou jasný() metóda.
Urobte viac s localStorage
Objekt localStorage má niekoľko metód vrátane setItem(), getItem(), removeItem() a clear(). Aj keď sa localStorage ľahko používa, nie je bezpečné ukladať citlivé informácie. Je to však dobrá voľba na vývoj projektov, ktoré nevyžadujú veľa úložného priestoru a nezahŕňajú žiadne citlivé informácie.
Chcete vytvoriť ďalší projekt JavaScript založený na localStorage? Tu je základná aplikácia so zoznamom úloh, ktorú môžete vyvinúť pomocou HTML, CSS a JavaScriptu.
