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í
-
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'
-
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.
