HTML tutoriál

HOME HTML Úvod do HTML HTML editory HTML Basic HTML prvky Atributy HTML HTML nadpisy HTML odstavce HTML styly Formátování HTML HTML citace HTML komentáře HTML barvy HTML CSS HTML odkazy HTML obrázky HTML favicon HTML tabulky HTML seznamy HTML Block & Inline HTML třídy ID HTML HTML iframe HTML JavaScript Cesty souboru HTML HTML hlava Rozložení HTML HTML responzivní Počítačový kód HTML Sémantika HTML Průvodce stylem HTML HTML entity HTML symboly HTML Emojis Znaková sada HTML HTML kódování URL HTML vs. XHTML

HTML formuláře

HTML formuláře Atributy formuláře HTML HTML prvky formuláře Typy vstupu HTML Vstupní atributy HTML Atributy vstupního formuláře HTML

HTML grafika

HTML plátno HTML SVG

HTML média

HTML média HTML video Zvuk HTML HTML pluginy HTML YouTube

HTML API

Geolokace HTML HTML Drag/Drop Webové úložiště HTML HTML Web Workers HTML SSE

Příklady HTML

Příklady HTML HTML kvíz HTML cvičení HTML certifikát HTML souhrn Přístupnost HTML

HTML reference

Seznam značek HTML Atributy HTML Globální atributy HTML Podpora HTML prohlížeče HTML události HTML barvy HTML plátno HTML Audio/Video HTML Doctypes HTML znakové sady HTML kódování URL HTML jazykové kódy Zprávy HTTP HTTP metody Převodník PX na EM Klávesové zkratky

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í platnosti
  • window.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 sessionStorageje 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.";