HTML Web Storage API
Webové úložiště HTML; lepší než cookies.
Co je webové úložiště HTML?
Pomocí webového úložiště mohou webové aplikace ukládat data lokálně v prohlížeči uživatele.
Před HTML5 musela být data aplikací ukládána do souborů cookie, které byly součástí každého požadavku serveru. Webové úložiště je bezpečnější a velké množství dat lze ukládat lokálně, aniž by to ovlivnilo výkon webu.
Na rozdíl od souborů cookie je limit úložiště mnohem větší (alespoň 5 MB) a informace se nikdy nepřenášejí na server.
Webové úložiště je pro každý původ (pro doménu a protokol). Všechny stránky z jednoho zdroje mohou ukládat a přistupovat ke stejným datům.
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje Web Storage.
API | |||||
---|---|---|---|---|---|
Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
Webové úložné objekty HTML
Webové úložiště HTML poskytuje dva objekty pro ukládání dat na klientovi:
window.localStorage
- ukládá data bez data vypršení platnostiwindow.sessionStorage
- ukládá data pro jednu relaci (data se ztratí při zavření karty prohlížeče)
Před použitím webového úložiště zkontrolujte podporu prohlížeče pro localStorage a sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
Objekt localStorage
Objekt localStorage ukládá data bez data vypršení platnosti. Data nebudou po zavření prohlížeče vymazána a budou dostupná následující den, týden nebo rok.
Příklad
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Vysvětlený příklad:
- Vytvořte pár název/hodnota localStorage s name="lastname" a value="Smith"
- Načtěte hodnotu "lastname" a vložte ji do prvku s id="result"
Výše uvedený příklad lze také napsat takto:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
Syntaxe pro odstranění položky "lastname" localStorage je následující:
localStorage.removeItem("lastname");
Poznámka: Páry název/hodnota jsou vždy uloženy jako řetězce. Nezapomeňte je v případě potřeby převést do jiného formátu!
Následující příklad počítá, kolikrát uživatel klikl na tlačítko. V tomto kódu je řetězec hodnot převeden na číslo, aby bylo možné zvýšit počítadlo:
Příklad
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).";
Objekt sessionStorage
Objekt sessionStorage
je roven objektu localStorage, kromě
toho, že ukládá data pouze pro jednu relaci. Data se vymažou, když uživatel zavře konkrétní kartu prohlížeče.
Následující příklad počítá, kolikrát uživatel v aktuální relaci klikl na tlačítko:
Příklad
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.";