Zapisywanie danych w przeglądarce (localStorage)

Funkcje pomocnicze

Pamięć przyjmuje tylko tekst, dlatego obiekty i tablice zamienia się na JSON. Dostęp do pamięci może się też skończyć błędem – gdy pamięć jest pełna albo użytkownik wyłączył ją w ustawieniach przeglądarki. Funkcje pomocnicze rozwiązują oba problemy:

function save(key, value) {
  try {
    localStorage.setItem(key, JSON.stringify(value));
    return true;
  } catch (error) {
    return false;
  }
}
function load(key, fallback) {
  try {
    const text = localStorage.getItem(key);
    return text === null ? fallback : JSON.parse(text);
  } catch (error) {
    return fallback;
  }
}
save("favorites", [2, 5]);
console.log(load("favorites", []).length);   // 2
console.log(load("does-not-exist", "domyślna"));   // domyślna

Funkcja load zwraca wartość domyślną także wtedy, gdy w pamięci jest uszkodzony tekst, którego nie da się odczytać jako JSON.

Przykład: zamknięte powiadomienie

<div id="notice">
  Nowy sklep internetowy jest już otwarty!
  <button type="button" id="close">Zamknij</button>
</div>

const notice = document.querySelector("#notice");
if (load("notice-closed", false)) {
  notice.hidden = true;
}
document.querySelector("#close").addEventListener("click", () => {
  notice.hidden = true;
  save("notice-closed", true);
});

Po kliknięciu Zamknij powiadomienie zniknie i pozostanie ukryte także po wczytaniu innej strony lub zamknięciu przeglądarki.

Warto wiedzieć

• localStorage zostaje na stałe, dopóki danych nie usunie strona albo użytkownik. sessionStorage ma te same metody, ale dotyczy tylko jednej karty i znika po jej zamknięciu.
• Pamięć należy do adresu witryny – do połączenia protokołu, domeny i portu. Witryna pod https://www.example.com nie widzi danych witryny pod https://example.com.
• Przeglądarki dają każdej witrynie mniej więcej 5 MB (stan na: październik 2026, zależnie od przeglądarki). Na większe dane jest IndexedDB.
• Gdy pamięć zmieni się w innej karcie tej samej witryny, pozostałe otwarte karty dostaną zdarzenie storage – karty mogą się tak nawzajem aktualizować. Safari (silnik WebKit) wysyła je jednak tylko do strony, która już pracowała z localStorage (stan na: październik 2026). Strona czekająca na zmiany powinna więc przynajmniej raz odczytać pamięć, na przykład przy wczytaniu.
• W odróżnieniu od ciasteczek dane z pamięci nie są wysyłane na serwer. Serwer dowie się o nich dopiero wtedy, gdy wyśle je JavaScript.

Czego nie trzymać w pamięci

Każdy skrypt na stronie może odczytać pamięć, także skrypt wstrzyknięty atakiem XSS. Hasła, tokeny logowania i dane osobowe nie powinny tam trafiać. Logowanie zostaw sesji w PHP z ciasteczkiem HttpOnly, którego JavaScript nie może odczytać.

Powiązane artykuły:
Bezpieczne sesje i logowanie
Zmiana treści i klas bez jQuery