Skip to Content

HTML 5 - data na straně klienta

Novým mechanismem k ukládání dat na klientské straně (webovém prohlížeči), je technologie lokálních úložišť Web Storage.

Jednou z metod této technologie je tzv. localStorage. Webová stránka si může v rámci jedné domény uložit jakákoliv data a pomocí skriptu opět načíst. V praxi to znamená využití těchto úložišť spíše pro osobní data či vlastních nastavení. Z hlediska funkčnosti a bezpečnosti musíme přemýšlet, že tyto informace se můžou kdykoliv ztratit např. v případě, kdy si klient přeinstaluje OS. Může také nastat situace, kdy prohlížeč jednoduše nepozná, co po něm chceme, protože ještě tuto metodu nepodporuje. Naštěstí to vypadá, že localStorage funguje v posledních verzích IE, Firefoxu, Google Chrome, Opeře i Safari. Pro starší prohlížeče budeme potřebovat nouzové řešení např. uložení dat na straně serveru či využít soubory cookie.

Na rozdíl od cookies má ale localStorage výhodnější pozici, co se týče velikosti vyhrazených dat. Je podstatně vyšší než u souborů cookies. Přenos dat pomocí cookies je také náročnější na výkon serveru kvůli objemu přenášených dat.

Mechanismus local Storage je jednoduché uchovávání páru název/hodnota v prohlížeči (asociativní pole). Local Storage můžeme použít pro věci, které chceme využít i po zavření klientského počítače. Naopak sessionStorage se informace zbaví po ukončení relace, to znamená dokud se nezavře prohlížeč.

K Web Storage lze přistupovat pomocí několika metod a vlastností javascriptového rozhraní API.

Příklad:

setItem(key, value) nastaví položku s klíčem na hodnotu value.

sessionStorage.setItem('jmeno', 'Alena Mrázková');

getItem(key) slouží ke čtení uložené hodnoty.

var jmeno = sessionStorage.getItem('jmeno');

V dalším příkladu si vytvoříme formulář, kde si klient nastaví velikost textu, která mu vyhovuje a vždy bude na této doméně přístupná. Pomocí tohoto formuláře můžeme toto nastavení také kdykoliv změnit. Vše je závislé také na CSS a proto ke změně stylů použijeme knihovnu jQuery. Tu si musíte buď stáhnout z webových stránek jQuery http://www.jquery.com a upravit obsah elementu script, aby jí načítal z naší složky či ji nechat načítat ze serverů společnosti Google: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js.

Základy této knihovny jsou jednoduché. Funkci jQuery() použijeme k načtení elementů pomocí selektorů CSS, s kterými můžeme manipulovat pomocí různých metod. Zkrácená verze funkce jQuery je $().
Jestliže hledáme na stránce element p, použijeme tento kód:
$("p")
Metoda ke skrytí tohoto elementu by například vypadala takto:
$("p").hide()

Formulář:
<form id="pismo" action=uloz_nastav"
method="post" accept-charset="utf-8">
 <fieldset id="barvy" class="">
    <label for="velikost_textu">Nastavení velikosti písma</label>
     <select name="velikost_textu" id="velikost_textu">
      <option value="16">16px</option>
      <option value="18">20px</option>
      <option value="24">24px</option>
     </select>
 </fieldset>
</form>

Nastavení páru název/hodnota:

function uloz_nastav(){
localStorage.setItem("velikost_textu" , $("#velikost_textu" ).val());
aplikace_na_stranku();
}

Načtení dat z localStorage a vložení do formulářových polí:

function nacist_nastaveni(){
var velikost_textu= localStorage.getItem("velikost_textu" );
$("#velikost_textu" ).val(velikost_textu);

aplikace_na_stranku();
}

Funkce, která aplikuje styl z volby na stránku:

function aplikace_na_stranku(){
$("body" ).css("fontSize" , $("#velikost_textu" ).val() + "px" );
}

A vše spustíme:


$(function(){

nacist_nastaveni();

$('form#pismo').submit(function(udalost){
udalost.preventDefault();

uloz_nastav();
});
});