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

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

 

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

Google       Google       26. 3. 2012       16 828×

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ů
Google
(fotka) Patrik JanáčekAutor se zajímá o programování v PHP, rád poslouchá hudbu, sportuje a hraje počítačové hry. Má rád Firefox a Windows Phone.
Facebook    

Nové články

Obrázek ke článku Malware KONNI se úspěšně skrýval 3 roky. Odhalil ho bezpečnostní tým Cisco Talos

Malware KONNI se úspěšně skrýval 3 roky. Odhalil ho bezpečnostní tým Cisco Talos

Bezpečnostní tým Cisco Talos odhalil celkem 4 kampaně dosud neobjeveného malwaru, který dostal jméno KONNI. Ten se dokázal úspěšně maskovat od roku 2014. Zpočátku se malware zaměřoval pouze na krádeže citlivých dat. Za 3 roky se ale několikrát vyvinul, přičemž jeho současná verze umožňuje útočníkovi z infikovaného počítače nejenom krást data, ale i mapovat stisky na klávesnici, pořizovat screenshoty obrazovky či v zařízení spustit libovolný kód. Pro odvedení pozornosti oběti zasílali útočníci v příloze také obrázek, zprávu a výhružkách severokorejského režimu či kontakty na členy mezinárodních organizací.

Reklama
Reklama
Obrázek ke článku Pouze jedna z deseti lokálních firem ví o pokutách plynoucích z GDPR

Pouze jedna z deseti lokálních firem ví o pokutách plynoucích z GDPR

Trend Micro, celosvětový lídr v oblasti bezpečnostních řešení a VMware, přední světový dodavatel cloudové infrastruktury a řešení pro podnikovou mobilitu, oznámily výsledky výzkumu mezi českými a slovenskými manažery zodpovědnými za ochranu osobních údajů, který zjišťoval, jak jsou připraveni na nové nařízení o ochraně osobních údajů (GDPR). Většina firem v České republice a na Slovensku nad 100 zaměstnanců je již s novým nařízením GDPR obeznámena. Výzkum provedený ve spolupráci s agenturou Ipsos ukázal, že téměř 8 firem z 10 o nařízení ví, přičemž jeho znalost je o něco vyšší na Slovensku (89 %) než v České republice (69 %).

Obrázek ke článku Vyděračský software Locky se vrací, tváří se jako potvrzení platby, odhalil tým Cisco Talos

Vyděračský software Locky se vrací, tváří se jako potvrzení platby, odhalil tým Cisco Talos

Jeden z nejznámějších ransomwarů, Locky, se vrací. Po většinu roku 2016 patřil mezi nejrozšířenější vyděračské softwary. Ke svému šíření využíval emailové kampaně s infikovanými přílohami. Ransomware Locky byl rozesílán prostřednictvím botnetu (internetový robot zasílající spamy) Necurs. Jeho aktivita na konci roku 2016 téměř upadla a spolu s ní i šíření ransomwaru Locky. Před několika týdny se Necurs opět probudil a začal posílat spamy nabízející výhodný nákup akcií. Dne 21. dubna zaznamenal bezpečnostní tým Cisco Talos první velkou kampaň ransomwaru Locky prostřednictvím botnetu Necurs za posledních několik měsíců.

Obrázek ke článku Dovozci baterií mění logistiku, letadlo nahrazuje námořní doprava

Dovozci baterií mění logistiku, letadlo nahrazuje námořní doprava

Dovozci baterií do mobilů či notebooků upouštějí od letecké přepravy zboží. V letošním roce plánují dovézt až 80 % produktů lodí. Přitom před 5 lety byla většina baterií do mobilních přístrojů dovezených do České republiky přepravována letadlem. Za proměnou způsobu transportu akumulátorů stojí zpřísnění pravidel pro leteckou přepravu, která přinášejí vyšší náklady i náročnou agendu.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý