Webové stránky obvykle fungují na základě protokolu HTTP, který je bez stavu. To znamená, že pokaždé, když stránku aktualizujeme nebo přejdeme na jinou stránku, všechna zadaná data se resetují a ztrácíme pokrok. Existují však různé způsoby, jak uložit zadaná data i po restartování stránky.
Jedním z nejběžnějších způsobů ukládání dat je použití místního úložiště webového prohlížeče, jako je localStorage nebo sessionStorage. Tyto objekty nám umožňují ukládat data do prohlížeče a přistupovat k nim i po restartování stránky.
Pro ukládání dat do místního úložiště můžeme použít JavaScript. Funkci můžeme přiřadit k události změny vstupního pole nebo odeslání formuláře a v této funkci ukládat data do místního úložiště pomocí metody setItem(). A pak, když načteme stránku, můžeme získat data z úložiště a obnovit je do vstupních polí.
Metody ukládání dat
Při práci s webovými aplikacemi je často nutné uložit data zadaná uživatelem při restartu stránky. K tomu existují různé metody:
- Používání cookies. Cookies jsou malé textové soubory, které jsou uloženy na straně klienta. Pomocí JavaScriptu je možné ukládat data do cookies a při načítání stránky je číst a obnovovat uložené hodnoty. Je to jednoduchý a běžný způsob ukládání dat.
- Použití localStorage. localStorage je objekt JavaScriptu, který umožňuje ukládat data na straně klienta, aniž by vypršela doba jejich uložení. Hodnoty uložené v localStorage budou k dispozici i po zavření prohlížeče a restartování stránky.
- Použití sessionStorage. sessionStorage je obdobou localStorage, ale data uložená v sessionStorage budou k dispozici pouze v rámci aktuální relace. Po zavření karty nebo okna prohlížeče budou data vymazána.
- Odesílání dat na server. Pokud chcete uložit data na server, můžete pomocí požadavků AJAX asynchronně odeslat data na server a získat odpověď. Na Serveru mohou být data uložena v databázi nebo jiných úložných mechanismech.
Při výběru metody ukládání dat je třeba vzít v úvahu požadavky projektu, typ dat a úroveň zabezpečení potřebnou pro ukládání dat. Každá z uvedených metod má své výhody a použití závisí na konkrétním případě.
Cookies a relace
- Cookie: Cookies jsou malé textové soubory, které jsou uloženy v počítači uživatele a obsahují informace o jeho interakci s webem. Prohlížeč odesílá soubory cookie na server při každém požadavku na stránku a server může tyto informace použít k přizpůsobení uživatelského zážitku. Cookies lze například použít k zapamatování preferencí uživatele, automatickému přihlášení na web nebo sledování jeho aktivity na webu. Cookies jsou uchovávány po určitou dobu stanovenou webem a mohou být uživatelem odstraněny.
- Zasedání: Relace jsou mechanismy, které ukládají informace o interakci uživatele s webem na serveru. Při každém dotazu server aktualizuje ID relace, které je uloženo v cookech nebo předáno v URL. Tento identifikátor umožňuje serveru propojit data uživatele s jeho aktuálním stavem na webu. Relace jsou bezpečnější, protože data jsou uložena na serveru a nejsou přenášena na klienta, ale vyžadují další prostředky serveru.
Cookies a relace umožňují ukládat uživatelská data mezi restartováním stránky. To může být užitečné například pro uložení nastavení uživatele, automatické ověřování nebo sledování kroků ve vícestránkové formě. Při používání cookies a relací je však nutné zajistit bezpečnost dat a neuchovávat v nich citlivé informace, jako jsou hesla nebo údaje o bankovních kartách.
Web Storage
Web Storage poskytuje dva objekty pro ukládání dat na straně klienta - localStorage a sessionStorage.
Oba objekty představují úložiště na úrovni prohlížeče a umožňují ukládat data jako páry klíč-hodnota.
Rozdíl mezi localStorage a sessionStorage je v jejich době života. Data uložená v localStorage budou k dispozici po zavření a opětovném otevření prohlížeče a data uložená v sessionStorage budou k dispozici pouze v rámci aktuální relace.
Pro ukládání dat do localStorage lze použít metodu setItem (). Například:
- localStorage.setItem('username', 'John');
K získání dat z localStorage lze použít metodu getItem (). Například:
- var username = localStorage.getItem('username');
K odstranění dat z localStorage lze použít metodu removeItem (). Například:
- localStorage.removeItem('username');
Podobné metody jsou k dispozici také pro práci se sessionStorage.
Web Storage je pohodlný a snadno použitelný způsob ukládání dat na stranu klienta při restartování stránky.
Použití LocalStorage a SessionStorage
K uložení zadaných dat lze při restartování stránky použít mechanismy ukládání dat v prohlížeči: LocalStorage a SessionStorage.
LocalStorage a SessionStorage jsou objekty, které poskytují prohlížeče pro ukládání dat na straně klienta. Umožňují ukládat data i po zavření prohlížeče nebo restartování stránky. Mezi těmito dvěma mechanismy je však malý rozdíl:
| LocalStorage | SessionStorage |
|---|---|
| Ukládá data na neomezenou dobu | Ukládá data pouze po dobu relace prohlížeče |
| Data jsou k dispozici ve všech oknech a kartách prohlížeče | Data jsou k dispozici pouze na aktuální kartě |
Pro použití LocalStorage a SessionStorage lze použít metody JavaScript setItem a getItem . Chcete-li například uložit hodnotu v LocalStorage, musíte použít následující kód:
localStorage.setItem('key', 'value');A chcete-li získat uloženou hodnotu z LocalStorage, musíte použít metodu getItem :
var value = localStorage.getItem('key');Podobně lze pracovat i se SessionStorage. Pro uložení hodnoty se používá metoda setItem a pro získání hodnoty metoda getitem .
Použití LocalStorage a SessionStorage tedy umožňuje uložit zadaná data při restartu stránky a zajistit jejich dostupnost v různých oknech a kartách prohlížeče (pro LocalStorage) nebo pouze na aktuální kartě (pro SessionStorage).
Aplikace IndexedDB
IndexedDB poskytuje možnost vytvářet objektová úložiště, kde lze ukládat data jako páry klíč-hodnota. Jsou podobné tabulkám v relačních databázích. Přitom jsou tato data uložena lokálně na straně klienta, což uživateli umožňuje přístup k nim bez připojení k internetu.
Použití IndexedDB umožňuje vytvářet webové aplikace s možností ukládání dat a offline. Můžete například uložit místní nastavení uživatele nebo uložit dříve stažená data do mezipaměti, abyste zvýšili rychlost.
IndexedDB pracuje prostřednictvím rozhraní JavaScript API, které poskytuje různé metody pro vytváření a správu databáze. Zde je jednoduchý příklad vytváření a plnění úložiště:
var request = indexedDB.open('myDatabase', 1);request.onupgradeneeded = function(event) );store.createIndex('myIndex', 'indexProperty');>;request.onsuccess = function(event) );>;request.onerror = function(event) ; IndexedDB je tedy mocným nástrojem pro ukládání dat na klientskou stranu a práci s nimi i offline. Je skvělý pro vytváření webových aplikací s bohatými funkcemi a ukládáním uživatelsky zadaných dat.
Jak je vidět na příkladu, práce s IndexedDB může být složitá a vyžaduje dobré pochopení principů fungování databází. Při správném použití však může IndexedDB výrazně zlepšit zážitek z používání webové aplikace a zvýšit její funkčnost.
Poznámka: IndexedDB není jediným způsobem, jak uložit data na klientskou stranu. Existují další technologie, jako je Web Storage a web SQL Database, které lze také použít v závislosti na potřebách projektu.