Web Storage (lokální úložiště) – HTML5
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Web Storage (lokální úložiště) – HTML5Web Storage (lokální úložiště) – HTML5

 
Hledat
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

Web Storage (lokální úložiště) – HTML5

Google       Google       26. 3. 2012       22 268×

Lokální úložiště (anglicky Web Storage) umožňuje ukládat informace o relaci u klienta v podobě klíč / hodnota. Data se nepřenáší na vzdálený server a storage je funkční ve všech moderních prohlížečích (IE8+).

Reklama
Reklama

Lokální úložiště

Lokální úložiště je webová metoda pro ukládání dat v prohlížeči. Data můžeme ukládát hned dvěma způsoby:

1. sessionStorage - pro ukládání krátkodobých dat, vydrží po dobu relace prohlížeče. Pokaždé, když uživatel otevře stránku v novém okně/záložce, prohlížeč vytvoří nový objekt sessionStorage (sessions).

2. localStorage - ukládá data pro více než jednu relaci, je funkčně shodný se sessionStorage, krom toho, že doba uložení dat nezáleží na životnosti okna/záložky (efektivní alternativa cookies).

// hodnota vydrží po dobu trvání relace
sessionStorage.setItem('klíč', 'hodnota');

// hodnota vydrží i po skončení session
localStorage.setItem('klíč', 'hodnota');

Zjištění podpory

Jednoduchým kódem zjistíme, zda je lokální úložiště v prohlížeči podporováno:

if ("localStorage" in window && window.localStorage != null) {
    // podporuje
    document.write("Prohlížeč podporuje lokální úložiště!");
} else {
    // nepodporuje
    document.write("Prohlížeč nepodporuje lokální úložiště!");        
}

V Internet Exploreru se do 8. verze vypíše, že nepodporuje lokální úložiště, a od 8. verze že podporuje. Více informací o podpoře napříč prohlížeči najdete na konci článku.

Metody

setItem(key / value): přidá pár (klíč / hodnota) do objektu sessionStorage,
getItem(key): načte hodnotu pro daný klíč,
clear(): odstraní všechny páry (klíč / hodnota) pro objekt sessionStorage,
removeItem(key): odstraní pár (klíč / hodnota) z objektu sessionStorage,
key(k): načte hodnotu klíče (k).

Při zadávání klíče můžete používat diakritiku.

V uvedených příkladech používáme sessionStorage, není třeba uvádět i localStorage, protože použití je úplně stejné.

Nastavení hodnoty
 

// nastaví pár (klíč / hodnota)
sessionStorage.setItem('jmeno','Filip'); // klíč = jmeno | hodnota = Filip

// nebo zkráceně
sessionStorage.jmeno = 'Filip';

Získání hodnoty
 

// vrátí 'Filip'
sessionStorage.getItem('jmeno');

// zkráceně, vrátí také 'Filip'
sessionStorage.jmeno;

Pokud chceme načtenou hodnotu i vypsat, musíme ji v JavaScriptu načíst do proměnné a až tu vypsat:

sessionStorage.jmeno = 'Filip'; // nastavíme jméno
var _jmeno = sessionStorage.jmeno; // do proměnné '_jmeno' načteme jméno (Filip)
document.write(_jmeno); // vypíšeme jméno (Filip)

Odstranění klíče / hodnoty
 

// odstraní pár (klíč / hodnota)
sessionStorage.removeItem('jmeno'); // odstraní jméno

Čištění úložiště
 

// vyčistí vše
sessionStorage.clear();

Příklady

V jednoduchých příkladech si ukážeme, jak můžeme Web Storage prakticky využít.

Navštívení dané stránky

V tomto příkladě si uděláme jednoduché počítadlo, které bude počítat navštívení dané stránky uživatelem.
Všimněte si, že používáme localStorage => v počítání můžeme pokračovat při další návštěvě.

Postup:

  1. Vytvoříme span s id pocitadlo (budeme do něj vypisovat výsledek).
  2. Pokud neexistuje pageLoadCount (I), nastavíme na nulu (II).
  3. Při každé návštěvě přičteme +1.
  4. Do spanu s id pocitadlo vypíšeme výsledek.
<p>
  Tuto stránku jste si zobrazili <span id="pocitadlo">nevíme</span> krát.
</p> <!-- 1. -->

<script>
  if (!localStorage.pageLoadCount) // 2.I.
    localStorage.pageLoadCount = 0; // 2.II.
    localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1; // 3.
    document.getElementById('pocitadlo').textContent = localStorage.pageLoadCount; // 4.
</script>

Výsledky příkladů

Odkaz na odhlášení
 

Vytvoříme si odkaz pro odhlášení uživatele, pokud bude nastaven objekt jméno, vyskočí okno s textem, aby se uživatel brzy vrátil.

Postup:

  1. Nastavíme jméno.
  2. Vytvoříme odkaz pro odhlášení - okno vyskočí v případě, že je nastaveno jméno.
<script>
sessionStorage.jmeno = 'Patrik'; // 1.
</script>

<!-- 2. -->
<a href="javascript:;" onClick="if(sessionStorage && localStorage.getItem('jmeno')) { alert('Vrať se brzy, ' + sessionStorage.getItem('jmeno')); }">Odhlásit se</a>

Výsledky příkladů

Velikost

Web Storage poskytuje mnohem větší kapacitu než cookies (4KB).

Velikost Web Storage
Internet Explorer 10MB na doménu
Mozilla 5MB na doménu
Google Chrome 5MB na doménu
Opera 5MB na doménu

Podpora

Web Storage je funkční ve všech moderních prohlížečích, viz tabulka.

Podpora Web Storage
Internet Explorer od verze 8
Mozilla Firefox 2, oficiálně 3.5+
Safari od verze 4
Google Chrome 4+ (sessionStorage 5+)
Opera 10.50+

Výsledky příkladů najdete na samostatné stránce.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

3 názory  —  3 nové  
Hlasování bylo ukončeno    
25 hlasů

Nové články

Obrázek ke článku Pandemie koronaviru, co dobrého nám přinesla?

Pandemie koronaviru, co dobrého nám přinesla?

Pandemie koronaviru, která se stala jakýmsi symbolem první poloviny roku 2020, určitě nebyla ničím veselým a je možné, že nás do budoucna ještě trochu potrápí i její následky. Na druhou stranu ale v některých oblastech zanechala pozitivní změny a návyky, na které jsme dříve nebyli zvyklí. Pojďme se společně podívat na krizi z trochu jiného úhlu a zhodnotit její přínosy.

Reklama
Reklama
Obrázek ke článku Open source neznamená „zdarma“

Open source neznamená „zdarma“

Mnoho společností po celém světě, univerzity, vládní organizace a jim podobné dnes používají open source technologie k vytvoření vlastních webových stránek. Tyto technologie se používají čím dál tím více. Jednoduše proto, že je řada poskytovatelů nabízí zcela zdarma. Je to ale opravdu to správné řešení pro všechny? 

Obrázek ke článku Rádi sledujete obsah streamovacích služeb? Dejte si pozor na pirátské verze Mandaloriana a Netflixu

Rádi sledujete obsah streamovacích služeb? Dejte si pozor na pirátské verze Mandaloriana a Netflixu

Streamovací služby a jejich obsah se v uplynulých měsících těšily velkému zájmu uživatelů, kteří se při pobytu v karanténě chtěli zabavit sledováním filmů a seriálů. Toho bleskově zneužili hackeři, kteří pod názvy oblíbených streamovacích platforem a jejich obsahu maskovali škodlivé soubory. Nejčastěji používali jako návnadu Netflix a seriál The Mandalorian. 

Obrázek ke článku Bionické ruce mění lidem životy. Konference INSPO ukázala nejnovější technologie

Bionické ruce mění lidem životy. Konference INSPO ukázala nejnovější technologie

Bionické myoprotézy rukou jsou ukázkou pokroku, který udělaly za posledních dvacet let technologie pro lidi se zdravotním postižením. Dnešní protézy, které fungují na principu snímání svalových vzorců, umožňují uživatelům operovat s křehkými předměty či provádět úkony složité na kooperaci různých částí těla – ať už jde o hru na hudební nástroje, zavazování tkaniček, nebo třeba pití ze skleničky. Na 20. ročníku konference INSPO se budou zájemci moci naživo seznámit nejen s takzvanou myorukou, ale rovněž s jedním z jejích uživatelů. 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý