HTML5 a localStorage: jak na praktické využití místního úložiště

Když jste chtěli s webem psaným v HTML 4.01 uložit nějaká data do počítače uživatele, měli jste prakticky k dispozici pouze cookies. Ty jsou ovšem použitelné jen pro velmi krátké informace, například o přihlášení uživatele nebo o nějakém nastavení. Při načtení stránky jsou prohlížečem posílány do webu.

Další možnost nabízely různé pokusy ala Google Gears - určitě si pamatujete na offline podobu Gmailu nebo Google Docs, které potřebovaly právě Google Gears.

HTML5 přichází s mnohem lepším konceptem lokálního ukládání, než jsou cookies, a tato technologie je zabudována přímo v prohlížečích, které HTML5 podporují. Místní úložiště v HTML5 nabídne webové stránce kapacitu několik MB (podle prohlížeče od 3 do 5 MB) a na rozdíl od cookies z něj nejsou data odesílána na web automaticky při načtení stránky. Ke komunikaci dochází až ve chvíli, kdy si stránka načtení nebo zápis dat vyžádá. Samozřejmě se web dostane jen k těm datům, která mu patří.

Místní úložiště je v HTML5 k dispozici ve dvou variantách. V článku vám ukážu práci s localStorage, které ukládá data na neomezenou dobu. Úplně stejným způsobem se pak pracuje také se sessionStorage. Rozdíl je v tom, že ve druhém případě dojde k odstranění dat poté, co uživatel zavře okno prohlížeče. S oběma úložišti pracujete pomocí JavaScriptu.

Podívejme se tedy na jednoduché využití localStorage, které poslouží k ukládání rozpracovaného článku. Každému z nás se asi někdy stalo, že při psaní nějakého textu do redakčního systému nebo jinde na webu spadl prohlížeč. Čím více textu jste měli ve formuláři, tím více budete rozladěni z toho, že po pádu prohlížeče nebo jeho nechtěném zavření budete muset text psát znovu. S využitím localStorage můžete obsah formuláře ukládat na disk počítače na neomezenou dobu, přečká zavření prohlížeče a především jeho ukládání nebo načítání nevyžaduje žádnou komunikaci se serverem - je tedy maximálně rychlé.

Připravte si formulář

Začněme tím, že si připravíme formulář. Zrecykloval jsem ukázku z minulého článku o HTML5, kdy jsme se dívali na možnosti stylování formuláře. HTML kód tedy bude následující:

  <form>
    <label for=nadpis>Nadpis článku</label>
    <input type=text name=nadpis id=nadpis required>
    <br><br>  
    <label for=clanek>Text článku</label>
    <textarea name=clanek id=clanek required rows=10></textarea>
    <br><br>
    <label for=url>URL adresa článku</label>
    <input type="url" pattern="https?://.+" name=url id=url required>
    <br><br>    
    <input type=submit value=Odeslat class=submit>
    <button type=button onclick="save();">Uložit koncept</button> 
    <button type=button onclick="load();">Načíst koncept</button> 
    <span class=cleaner></span>
    <div id=status></div>
  </form>

Formulář se skládá ze dvou vstupních políček input a jedné textové oblasti, ke každému je přiřazen popisek label. Všechny položky formuláře jsou povinné k vyplnění, což zajistí atribut required. Pokud uživatel nevyplní data, formulář se neodešle.

Připomínám, že v HTML5 je k dispozici celá řada nových typů prvku input. V ukázce vidíte typ url - prohlížeče s dotykovým ovládáním jej dovedou rozpoznat a upravit klávesnici na obrazovce tak, aby uživatel mohl například rychle zadat doménu v adrese webu.

Dále je zde atribut pattern sloužící k rychlému ověřování vstupu uživatele. V tomto případě jej použijeme k ověření, zda uživatel zadal webovou adresu. Ověření probíhá v prohlížeči, ještě před odesláním na server. Není třeba psát nějakou JavaScriptovou obsluhu, vše vyřeší jen správný regulární výraz v atributu pattern. Více o tomto ověřování v článku Formuláře v HTML5: nové typy polí a automatická validace.

Následuje odesílací tlačítko, tedy opět prvek input s typem submit. K němu přidejte ještě dvě tlačítka button, která poslouží pro ukládání dat do localStorage a pro jejich načítání do formuláře. Posledním prvkem bude značka DIV, do které budeme psát různé informace po stisku tlačítek.

Opáčko: CSS3 pro formulář v HTML5

V článku Úprava vzhledu formuláře v HTML5 pomocí CSS3 jsme se dívali na stylování formulářů s využitím nových technik v HTML5. Formulář tedy z větší části zrecyklujeme i se styly z minula:

    body{
      font-family: Arial;
      font-size: 12px;
      color: #333;
    }
    form{
      background: #F8F8F8;
      margin: 10px;
      padding: 10px;
      width: 400px;
      background-image: linear-gradient(bottom, rgb(153,153,153) 44%, rgb(204,204,204) 72%);
	  background-image: -o-linear-gradient(bottom, rgb(153,153,153) 44%, rgb(204,204,204) 72%);
	  background-image: -moz-linear-gradient(bottom, rgb(153,153,153) 44%, rgb(204,204,204) 72%);
	  background-image: -webkit-linear-gradient(bottom, rgb(153,153,153) 44%, rgb(204,204,204) 72%);
	  background-image: -ms-linear-gradient(bottom, rgb(153,153,153) 44%, rgb(204,204,204) 72%);
	  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.44, rgb(153,153,153)),color-stop(0.72, rgb(204,204,204)));
	  -webkit-border-radius: 10px;
	  -moz-border-radius: 10px;
      border-radius: 10px; 
      -webkit-box-shadow: 1px 1px 1px 1px #ccc;
	  -moz-box-shadow: 1px 1px 1px 1px #ccc;
      box-shadow: 1px 1px 1px 1px #ccc; 
    }
    label{
      font-weight: bold;
      width: 150px;
    }
    input, textarea{
      width: 100%;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px; 
      border: none;
      padding: 3px;
    }
    input:valid, textarea:valid {
      background: #ccffcc;
    }
    input:invalid, textarea:invalid {
      background: #ffcccc;
    }    
    input.submit, input.submit:valid{
      border: #fff;
      color: #fff;
      cursor: pointer;
      font-weight: bold;
      background: #0066CC;
      text-transform: uppercase;
      float: right;
      width: auto;
      padding: 5px 10px;
      background-image: linear-gradient(bottom, rgb(0,102,204) 44%, rgb(87,171,255) 72%);
      background-image: -o-linear-gradient(bottom, rgb(0,102,204) 44%, rgb(87,171,255) 72%);
      background-image: -moz-linear-gradient(bottom, rgb(0,102,204) 44%, rgb(87,171,255) 72%);
      background-image: -webkit-linear-gradient(bottom, rgb(0,102,204) 44%, rgb(87,171,255) 72%);
      background-image: -ms-linear-gradient(bottom, rgb(0,102,204) 44%, rgb(87,171,255) 72%);
      background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.44, rgb(0,102,204)),color-stop(0.72, rgb(87,171,255)));
      margin: 0px 2px;
    }
    button{
      border: #fff;
      color: #fff;
      cursor: pointer;
      font-weight: bold;
      background: #333;
      text-transform: uppercase;
      float: right;
      padding: 5px 10px;
      margin: 0px 2px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;    
    }    
    .cleaner{
      clear: both;
      display: block;
    }

Styly už nebudu podrobně komentovat a odkáži vás na zmíněný článek. Jen ve stručnosti. U definice vzhledu formuláře používáme nový zápis pro nastavení přechodové výplně bez toho, že by bylo nutné používat nějaký fyzický obrázek jako podklad. Objevuje se zde také nastavení zaoblených rohů a stínování.

Od minula přibylo jen pár nových definic. Vysvětlení si zaslouží selectory :valid a :invalid. S jejich pomocí můžete různě nastylovat formulářová políčka podle toho, zda obsahují hodnotu vyhovující validátoru. V naší ukázce jsou tedy nevyhovující políčka (:invalid) podbarvena červeně a vyhovující (:valid) zeleně.

Jelikož je každé pole nutné vyplnit, jsou při načtení formuláře všechna červená. Jakmile do nich zadáte alespoň jeden znak, podkres se změní na zelený. Navíc, u políčka pro zadání url je ještě ověřovací vzorek v atributu pattern, takže pole se podbarví zeleně až v momentě, kdy do něj vložíte správně zadanou adresu.

Formulář by tedy měl vypadat následovně:

Formulář v HTML5 s podbarvováním vyhovujících hodnot

Ukládání a načítání dat z localStorage

Formulář máme, zbývá k tlačítkům pro jeho ukládání a načítání doplnit funkcionalitu. Do události onclick jsme u tlačítek button přidali volání JavaScriptových funkcí save() a load(). Do hlavičky webu (nebo klidně do samostatného souboru) tedy doplníme definici těchto funkcí, které budou pracovat s HTML5 úložištěm localStorage.

    function save(){
      if (localStorage) {
    	localStorage.nadpis = document.getElementById('nadpis').value;
    	localStorage.clanek = document.getElementById('clanek').value;
    	localStorage.url = document.getElementById('url').value;
    	document.getElementById('status').innerHTML = '
Formulář byl uložen do lokálního úložiště.
';
	  }
	  else{
	    alert('Váš prohlížeč bohužel nepodporuje místní úložiště');
	  }
    }
    
    function load(){
      if (localStorage) {
    	document.getElementById('nadpis').value = localStorage.nadpis;
    	document.getElementById('clanek').value = localStorage.clanek;
    	document.getElementById('url').value = localStorage.url;
    	document.getElementById('status').innerHTML = '
Formulář byl načten z lokálního úložiště.
';    	
	  }
	  else{
	    alert('Váš prohlížeč bohužel nepodporuje místní úložiště');
	  }    
    }

Struktura obou funkcí je podobná. V první řadě pomocí podmínky ověříme, zda prohlížeč localStorage podporuje. Pokud ne, zobrazíme uživateli upozorňující hlášku. S úložištěm můžete pracovat velmi jednoduše. Při ukládání prakticky stačí vzít objekt localStorage, za tečku doplnit označení hodnoty (klíč) a následně nějakou hodnotu přiřadit. Při čtení dat z localStorage přistupujete k údajům stejným způsobem, tedy localStorage.klíč.

V obou funkcích ještě po uložení nebo načtení dat z localStorage naplníme stavový DIV na spodu formuláře a uživateli zobrazíme informaci, že data byla načtena nebo uložena.

Zbývá vše jen vyzkoušet. Vyplňte formulář, uložte data, zavřete prohlížeč, znovu jej otevřete a ve formuláři zkuste data znovu načíst.

Možná vylepšení

Kromě naprosto jednoduchého ukládání a načítání dat podporuje localStorage (nebo i jeho zmíněná obdoba sessionStorage) další metody. Voláním localStorage.clear() můžete místní úložiště pro daný web vyprázdnit. Pomocí localStorage.length a localStorage.remainingSpace (funguje zatím jen v IE) zjistíte obsazené nebo volné místo v úložišti. Voláním localStorage.removeItem(klíč) můžete odstranit jednu hodnou z úložiště.

Do stavových informací po načtení nebo uložení dat můžete ještě doplnit jejich velikost, případně informaci o zbývajícím volném místě. Dalším vylepšením by mohlo být automatické ukládání bez toho, že by uživatel musel ručně kliknout na tlačítko. Stačí napsat nějakou JavaScriptovou obsluhu. A samozřejmě pro univerzální použití by bylo vhodné doplnit smyčky pro procházení všech polí ve formuláři místo toho, abyste je ručně definovali do ukládacích a načítacích funkcí.

Další informace o úložištích zjistíte na adrese dev.w3.org/html5/webstorage. V příloze článku najdete jako vždy soubor s kompletní ukázkou.