Mechanismus localStorage poskytuje typ objektu webového úložiště, který vám umožňuje ukládat a načítat data v prohlížeči. Data můžete ukládat a přistupovat k nim bez vypršení platnosti; data budou k dispozici i poté, co návštěvník vaše stránky zavře.
K localStorage budete normálně přistupovat pomocí JavaScriptu. S malým množstvím kódu můžete vytvořit ukázkový projekt, jako je počítadlo skóre. To ukáže, jak můžete ukládat trvalá data a přistupovat k nim pouze pomocí kódu na straně klienta.
Co je localStorage v JavaScriptu?
Objekt localStorage je součástí rozhraní API webového úložiště, které podporuje většina webových prohlížečů. Data můžete uložit jako páry klíč–hodnota pomocí localStorage. Jedinečné klíče a hodnoty by měly být ve formátu UTF-16 DOM String.
Pokud chcete ukládat objekty nebo pole, budete je muset převést na řetězce pomocí JSON.stringify() metoda. Do localStorage můžete uložit až 5 MB dat. Také všechna okna se stejným původem mohou sdílet data localStorage daného webu.
Prohlížeč tato data nesmaže, ani když je uživatel zavře. Bude k dispozici webu, který jej vytvořil, během jakékoli budoucí relace. Pro citlivá data byste však neměli používat localStorage, protože k nim mají přístup jiné skripty běžící na stejné stránce.
localStorage vs. sessionStorage
The localStorage a sessionStorage objekty jsou součástí rozhraní Web Storage API, které lokálně ukládá páry klíč-hodnota. Všechny moderní prohlížeče je podporují oba. S localStorage platnost dat nevyprší ani poté, co uživatel zavře prohlížeč. Tím se liší od sessionStorage, která po skončení relace stránky vymaže data. Relace stránky končí, když zavřete kartu nebo okno.
Kód použitý v tomto projektu je k dispozici v a úložiště GitHub a můžete jej používat zdarma pod licencí MIT. Pokud se chcete podívat na živou verzi projektu počítadla skóre, můžete se podívat na živou verzi demo.
Jak funguje localStorage?
K funkci localStorage můžete přistupovat prostřednictvím Window.localStorage vlastnictví. Tato vlastnost poskytuje několik metod jako setItem(), getItem() a removeItem(). Můžete je použít k ukládání, čtení a mazání párů klíč/hodnota.
Jak ukládat data do localStorage
Data můžete ukládat do localStorage pomocí setItem() metoda. Tato metoda přijímá dva argumenty, klíč a odpovídající hodnotu.
window.localStorage.setItem('Krajta', 'Guido van Rossum');Tady, Krajta je klíčem a Guido van Rossum je hodnota. Pokud chcete uložit pole nebo objekt, budete je muset převést na řetězec. Pole nebo objekt můžete převést na řetězec pomocí JSON.stringify() metoda.
okno.localStorage.setItem('Python', 'Guido van Rossum');konst student = {
jméno: "Yuvraj",
známky: 85,
Předmět: "Strojové učení"
}
konst skóre = [76, 77, 34, 67, 88];
okno.localStorage.setItem('result', JSON.stringify (student));
okno.localStorage.setItem('marks', JSON.stringify (skóre));
Jak číst data z localStorage
Data z localStorage můžete číst pomocí getItem() metoda. Tato metoda přijímá klíč jako parametr a vrací hodnotu jako řetězec.
nechat data1 = okno.localStorage.getItem('Python');
nechat data2 = okno.localStorage.getItem('výsledek');
řídicí panel.log (data1);
řídicí panel.log (data2);
Tím vznikne následující výstup:
Guido van Rossum
{"název":"Yuvraj","značky":85,"předmět":"Strojové učení"}Pokud chcete převést výsledek z řetězce na objekt, měli byste použít JSON.parse() metoda.
nechat data2 = JSON.parse(okno.localStorage.getItem('výsledek'));
řídicí panel.log (data2);Jak odstranit relace localStorage
Relace localStorage můžete odstranit pomocí removeItem() metoda. Chcete-li odstranit pár klíč–hodnota, musíte této metodě předat klíč jako parametr. Pokud klíč existuje, metoda odstraní pár klíč-hodnota a pokud klíč neexistuje, metoda neudělá nic.
window.localStorage.removeItem('Krajta');
window.localStorage.removeItem('C++');Jak vymazat všechny položky v localStorage
Všechny položky v místním úložišti můžete vymazat pomocí Průhledná() metoda. Této metodě nemusíte předávat žádný parametr.
okno.místní úložiště.Průhledná();Jak zjistit délku localStorage
Délku localStorage můžete zjistit pomocí localStorage.length vlastnictví.
nechat len = localStorage.length;
řídicí panel.log (len);Jak získat klíč na dané pozici
Klíč na dané pozici získáte pomocí klíč() metoda. Tato metoda přijímá index jako parametr.
nechat d = localStorage.key(1);
řídicí panel.log (d);Metoda key() se primárně používá k procházení všech položek v localStorage.
Jak procházet všechny položky v localStorage
Všechny položky v localStorage můžete iterovat pomocí cyklu for.
pro (nechat i = 0; i < localStorage.length; i++){
nechat klíč = localStorage.key (i);
nechat hodnota = localStorage.getItem (klíč);
řídicí panel.log (klíč, hodnota);
}Metoda key() přijímá index jako argument a vrací odpovídající klíč. Metoda getItem() přijímá klíč jako argument a vrací odpovídající hodnotu. Konečně, console.log() metoda vytiskne pár klíč-hodnota.
Jednoduchý projekt JavaScript založený na localStorage
S pochopením jeho základních metod se můžete rozvíjet jednoduchý JavaScriptový projekt založené na localStorage. V tomto projektu vytvoříte aplikaci počítadla skóre, která bude zvyšovat a snižovat počet skóre podle kliknutí na tlačítko. Také implementujete funkci pro vymazání všech položek v localStorage.
Vytvořit index.html a script.js soubor do nové složky a otevřete soubory ve svém oblíbeném editoru kódu. Pomocí následujícího kódu HTML vytvořte rozhraní pro aplikaci počítadla skóre:
<!DOCTYPE html>
<html>
<tělo>
<h1>localStorage v JavaScriptu</h1>
<tlačítko onclick="zvýšitPočítadlo()" typ="knoflík">Zvýšit skóre</button>
<tlačítko onclick="snížitPočítadlo()" typ="knoflík">Snížit skóre</button>
<tlačítko onclick="clearCounter()" typ="knoflík">Vymazat localStorage</button>
<p>Skóre:</str>
<p id="skóre"></str>
<p>Klikněte na "Zvýšit skóre" tlačítko pro zvýšení počtu skóre</str>
<p>Klikněte na "Snížit skóre" tlačítko pro snížení počtu skóre</str>
<p>Klikněte na "Vymazat localStorage" tlačítko pro vymazání místního úložiště</str>
<p>
Můžete zavřít kartu prohlížeče (nebo okno), a Snaž se znovu.
Uvidíte, že data stále přetrvávají ajene ztraceny i po uzavření
prohlížeče.
</str>
<skript src="script.js"></script>
</body>
</html>Tato stránka obsahuje tři tlačítka: Zvýšit skóre, Snížit skóre, a Vymazat localStorage. Tato tlačítka volají zvýšitPočítadlo(), snížitPočítadlo(), a clearCounter() funkce resp. Pomocí následujícího kódu přidejte funkce do aplikace počítadla skóre pomocí JavaScriptu.
funkcezvýšitPočítadlo() {
var počítat = Číslo(okno.localStorage.getItem("počet"));
počet += 1;
window.localStorage.setItem("počet", počet);
document.getElementById("skóre").vnitřníHTML = počet;
}The zvýšitPočítadlo() funkce získá počet pomocí metody getItem(). Převede výsledek na číslo, protože getItem() vrátí řetězec a uloží jej do proměnné count.
Při prvním kliknutí na Zvýšit skóre tlačítko bude před každým voláním setItem(). Váš prohlížeč nenajde počet klíč v localStorage, takže vrátí hodnotu null. Protože funkce Number() vrací 0 pro nulový vstup, nepotřebuje žádné speciální zpracování velkých a malých písmen. Kód může bezpečně zvýšit hodnotu počtu, než ji uloží a aktualizuje dokument tak, aby zobrazoval novou hodnotu.
funkcesnížitPočítadlo() {
var počítat = Číslo(okno.localStorage.getItem("počet"));
počet -= 1;
window.localStorage.setItem("počet", počet);
document.getElementById("skóre").vnitřníHTML = počet;
}The snížitPočítadlo() funkce načítá a kontroluje data stejně jako zvýšitPočítadlo() dělá. Snižuje to počet proměnná o 1, což je výchozí hodnota 0.
funkceclearCounter() {
okno.místní úložiště.Průhledná();
document.getElementById("skóre").vnitřníHTML = "";
}Poslední, clearCounter() funkce odstraní všechna data z localStorage pomocí Průhledná() metoda.
Udělejte více s localStorage
Objekt localStorage má několik metod včetně setItem(), getItem(), removeItem() a clear(). I když se localStorage snadno používá, není bezpečné ukládat citlivé informace. Ale je to dobrá volba pro vývoj projektů, které nevyžadují velké úložiště a nezahrnují žádné citlivé informace.
Chcete vytvořit další projekt JavaScript založený na localStorage? Zde je základní aplikace se seznamem úkolů, kterou můžete vyvinout pomocí HTML, CSS a JavaScriptu.