localStorage – ukládání dat v prohlížeči

Co je localStorage?

localStorage je jednoduché úložiště klíč–hodnota dostupné JavaScriptu v prohlížeči. Data v něm přežívají zavření stránky, záložky i prohlížeče – zůstávají tak dlouho, dokud je uživatel nebo kód ručně nesmaže.

Vlastnosti, které musíš znát:

• Data jsou textová – ukládá se pouze string. Čísla, pole a objekty je nutné před uložením převést na JSON.
• Data jsou vázána na doménu – crazy-mac.cz vidí jen svá data, jiné weby k nim nemají přístup.
• Kapacita je přibližně 5 MB na doménu – pro textová data více než dostatečné.
• Data nejsou šifrována – nikdy do localStorage neukládej hesla ani citlivé osobní údaje.

Základní rozhraní

localStorage má čtyři jednoduché metody:

// Uložit hodnotu
localStorage.setItem('klic', 'hodnota');

// Načíst hodnotu (vrátí null, pokud klíč neexistuje)
let hodnota = localStorage.getItem('klic');

// Smazat konkrétní klíč
localStorage.removeItem('klic');

// Smazat vše (všechna data pro tuto doménu!)
localStorage.clear();

Bezpečné čtení s výchozí hodnotou

Pokud klíč ještě neexistuje, getItem() vrátí null. Pro bezpečné načtení s výchozí hodnotou použij operátor ||:

// Pokud klíč neexistuje, použij výchozí hodnotu '0'
let pocet = localStorage.getItem('pocet') || '0';

// Pro čísla nezapomeň na převod
let pocetCislo = parseInt(localStorage.getItem('pocet') || '0');

Ukládání objektů a polí

localStorage ukládá pouze řetězce. Aby se dalo pracovat s objekty a poli, je nutné je převádět pomocí JSON.stringify() při ukládání a JSON.parse() při čtení:

// Uložení pole
let oblibene = ['web/w.uvod.html', 'web/w.css_grid.html'];
localStorage.setItem('oblibene', JSON.stringify(oblibene));

// Načtení pole
let nacteneOblibene = JSON.parse(localStorage.getItem('oblibene') || '[]');
// Výchozí hodnota '[]' zajistí prázdné pole, pokud klíč neexistuje

// Uložení objektu
let nastaveni = { tema: 'tmave', jazyk: 'cs' };
localStorage.setItem('nastaveni', JSON.stringify(nastaveni));

// Načtení objektu
let nacteneNastaveni = JSON.parse(
  localStorage.getItem('nastaveni') || '{}'
);

Praktický příklad – pamatovat si téma stránky

Přepínač tmavého a světlého režimu, který si uživatelovu volbu zapamatuje:

// Načtení uloženého tématu při startu stránky
let ulozeneTeMA = localStorage.getItem('tema');
if (ulozeneTeMA === 'svetle') {
  document.body.classList.add('light-mode');
  document.getElementById('theme-icon').textContent = '☀️';
}

// Přepínání tématu
document.getElementById('theme-toggle').addEventListener('click', function () {
  let jeStvetly = document.body.classList.toggle('light-mode');

  // Uložení volby
  if (jeStvetly) {
    localStorage.setItem('tema', 'svetle');
    document.getElementById('theme-icon').textContent = '☀️';
  } else {
    localStorage.setItem('tema', 'tmave');
    document.getElementById('theme-icon').textContent = '🌙';
  }
});

Přesně takto funguje přepínač tématu na tomto webu.

Praktický příklad – sledování navštívených lekcí

Ukázka, jak tento web ukládá seznam navštívených lekcí:

// Načtení uloženého seznamu (nebo prázdného pole)
let navstivene = JSON.parse(localStorage.getItem('web-visited') || '[]');

// Označení lekce jako navštívené po kliknutí
document.querySelectorAll('#html-nav a').forEach(function (odkaz) {
  let href = odkaz.getAttribute('href');

  // Vizuální označení již navštívených
  if (navstivene.includes(href)) {
    odkaz.classList.add('visited');
  }

  // Uložení při kliknutí
  odkaz.addEventListener('click', function () {
    if (!navstivene.includes(href)) {
      navstivene.push(href);
      localStorage.setItem('web-visited', JSON.stringify(navstivene));
    }
  });
});

sessionStorage – data jen pro aktuální záložku

Prohlížeč nabízí i sessionStorage se stejným rozhraním, ale kratší životností. Data v sessionStorage zanikají při zavření záložky nebo prohlížeče – hodí se pro dočasné informace (krok ve formuláři, stav rozbalené sekce…):

sessionStorage.setItem('krok-formulare', '2');
let krok = sessionStorage.getItem('krok-formulare');

Klíčový rozdíl: localStorage data přežijí zavření prohlížeče, sessionStorage ne.

Jak zobrazit a smazat data v DevTools

V prohlížeči lze uložená data snadno prohlédnout a smazat:

• Chrome / Edge: DevTools (F12) → záložka Application → Local Storage.
• Firefox: DevTools → záložka Storage → Local Storage.
• Safari: DevTools → záložka Storage → Local Storage.

V DevTools lze jednotlivé klíče editovat nebo mazat přímo kliknutím. Pro smazání všech dat konkrétní domény slouží tlačítko Clear All.

Tip od Zdeňka

Zdeněk radí: localStorage je jedna z věcí, které mě při tvorbě tohoto webu nejvíc potěšily. Bez serveru, bez databáze, bez registrace – a přesto si web pamatuje, kde uživatel skončil, co má rád a jak si vedl v testu. Kdykoli přidávám novou funkci, která si má něco zapamatovat, sáhnu po localStorage jako první. Jen pamatuj na dvě pravidla: vždy převáděj objekty přes JSON a nikdy tam nedávej citlivé údaje. A pro ladění – otevři DevTools, záložku Application a přímo tam vidíš, co je uloženo. Ušetří ti to spoustu console.log volání.