V dnešním digitálním světě se setkáváme s neustálým tokem dat, která jsou distribuována, ukládána a zpracovávána v různých formátech. Mezi klíčové technologie pro práci s daty na straně klienta patří formát JSON (JavaScript Object Notation) společně s webovými úložišti, jako jsou localStorage a sessionStorage. Tyto technologie umožňují efektivní manipulaci s daty a jejich persistentní či dočasné ukládání přímo v prohlížeči. V tomto článku se podrobně zaměříme na praktické využití JSON, localStorage a sessionStorage.

JSON manipulace

JSON je lehký formát pro výměnu dat, který je snadno čitelný pro lidi a zároveň snadno zpracovatelný a generovatelný stroji. V JavaScriptu lze s JSON pracovat přímo prostřednictvím dvou základních metod: JSON.parse() pro převod JSON řetězce na JavaScriptový objekt a JSON.stringify() pro konverzi JavaScriptového objektu nebo hodnoty zpět na JSON řetězec.

• JSON.parse(string): Přijímá JSON řetězec a převádí ho na odpovídající JavaScriptový objekt. Tato metoda je užitečná při příjmu dat ve formátu JSON z webového API nebo při čtení uložených dat z localStorage či sessionStorage.

• JSON.stringify(value): Přijímá JavaScriptový objekt nebo hodnotu a převádí je na řetězec ve formátu JSON. Tato funkce se hodí pro odesílání dat na server nebo pro ukládání dat do webového úložiště.

Práce s localStorage a sessionStorage

Webová úložiště localStorage a sessionStorage poskytují možnost ukládat data mezi jednotlivými relacemi prohlížeče (v případě localStorage) nebo pouze pro dobu trvání aktuální relace prohlížeče (v případě sessionStorage). Data uložená v těchto úložištích jsou specifická pro danou doménu a přístupná pouze prostřednictvím JavaScriptu.

• localStorage: Umožňuje dlouhodobé ukládání dat, která zůstávají dostupná i po zavření a znovuotevření prohlížeče. Ideální pro ukládání nastavení aplikace, preferencí uživatele nebo jiných dat, která by měla zůstat zachována mezi relacemi.

• sessionStorage: Data uložená v sessionStorage jsou dostupná pouze po dobu trvání relace prohlížeče, což znamená, že po zavření prohlížeče jsou data ztracena. Toto úložiště je vhodné pro ukládání dat, jako jsou informace o aktuálním stavu stránky nebo aplikace, které nejsou potřebné mezi relacemi.

Příklady použití

1. Ukládání a načítání uživatelských preferencí pomocí localStorage

   Ukládání:

   const userPreferences = { theme: 'dark', fontSize: 'medium' };
   localStorage.setItem('preferences', JSON.stringify(userPreferences));
   

   Načítání

   const loadedPreferences = JSON.parse(localStorage.getItem('preferences'));
   console.log(loadedPreferences.theme); // Výpis: 'dark'
   

2. Dočasné ukládání dat formuláře s sessionStorage

   Ukládání:

   sessionStorage.setItem('formData', JSON.stringify({ name: 'Jan', age: 30 }));
   

   Načítání:

   const formData = JSON.parse(sessionStorage.getItem('formData'));
   console.log(formData.name); // Výpis: 'Jan'
   

Práce s JSON a webovými úložišti jako localStorage a sessionStorage představují základní stavební bloky pro efektivní manipulaci s daty na straně klienta v moderních webových aplikacích. Díky jejich využití můžeme snadno ukládat, načítat a přenášet data mezi různými částmi aplikace, což vede k lepší uživatelské zkušenosti a optimalizaci výkonu.