Používání webového úložiště HTML5

HTML5 je dnes nejrozšířenějším slovem ve vývoji webu. Nové funkce, které HTML5 slibuje, budou obrovskou podporou pro webové vývojáře, kteří chtějí přestat vylepšovat, zrychlovat a flexibilně upravovat své webové stránky. Jednou z funkcí, která mě zaujala, je webové úložiště HTML5. Web Storage poskytuje metodu na straně klienta pro ukládání informací o relaci. Podívejte se, jak funguje Web Storage!

Fakta o jednoduchém webovém úložišti

  • Hodnoty mohou být libovolný datový typ podporovaný algoritmem strukturovaného klonování.
  • Uživatelským agentům by neměla vypršet platnost dat z úložných oblastí relace kontextu procházení, ale mohou tak učinit, když uživatel požádá o smazání takových dat, nebo když UA zjistí, že má omezený úložný prostor, nebo z bezpečnostních důvodů.
  • li>
  • Položky úložiště jsou dostupné v celé doméně.

Metody webového úložiště HTML5

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

Nastavení klíče/hodnoty

Existují dva různé způsoby nastavení informací do sessionStorage:

sessionStorage.setItem('someKey','someValue');

...nebo můžete použít zkratkovou metodu:

sessionStorage.someKey = 'someValue';

Získání hodnoty

Existují dva způsoby, jak získat také pár klíč/hodnota:

sessionStorage.getItem('someKey'); //returns 'someValue'

...nebo jednoduše odkazujte na objekt sessionStorage:

sessionStorage.someKey; //returns 'someValue'

Odebrání klíče/hodnoty

sessionStorage.removeItem('someKey'); //returns 'undefined' for someKey

Vše, co musíte udělat, je poskytnout klíč k metodě removeItem.

Vymazání úložiště

sessionStorage.clear(); //everything gone!

Jednoduchý jasný hovor – to je ono.

Příklad (velmi) základního použití webového úložiště

<a href="javascript:;" onClick="if(sessionStorage && sessionStorage.getItem('name')) { alert('Come back soon, ' + sessionStorage.getItem('name')); }">Sign Out</a>

Když uživatel klikne na odkaz pro odhlášení, požádáme ho, aby se brzy vrátil!

Podpora prohlížeče...Fuj

Stejně jako každá jiná skvělá funkce, která je dnes k dispozici, je problémem podpora prohlížeče. Internet Explorer nepodporoval Web Storage až do IE8, takže budete muset vytvořit svůj vlastní objekt/třídu sessionStorage (možná pomocí MooTools nebo Dojo?), pokud chcete podporovat starší prohlížeče IE.

Webové úložiště HTML5 je velmi jednoduché, ale velmi zajímavé. Vzhledem k tomu, že webové úložiště HTML5 vyžaduje JavaScript, nebudete jej chtít používat pro žádnou kritickou aplikaci, pokud nechcete uživatele přinutit používat prohlížeč, který tuto funkci podporuje.

Jaký je váš názor na webové úložiště HTML5? Už jste to použili pro nějaké aplikace?