JavaScript Academy · Lekcja

Zapisywanie obiektów za pomocą JSON

Proszę serializować obiekty, aby je zapisywać i odczytywać.

Zapisywanie obiektów za pomocą JSON to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Magazyn przechowuje wyłącznie ciągi znaków

Web Storage przechowuje ciągi znaków, dlatego nie można zapisać w nim obiektu bezpośrednio. Zapisanie obiektu daje bezużyteczny tekst "[object Object]". Rozwiązaniem jest JSON.

localStorage.setItem("user", { name: "Ada" });
console.log(localStorage.getItem("user")); // "[object Object]"

Serializacja za pomocą JSON.stringify

Przed zapisaniem obiekt należy przekonwertować na ciąg JSON za pomocą JSON.stringify.

const user = { name: "Ada", age: 36 };
localStorage.setItem("user", JSON.stringify(user));

Deserializacja za pomocą JSON.parse

Podczas odczytu ciąg znaków należy z powrotem zamienić na obiekt za pomocą JSON.parse.

const raw = localStorage.getItem("user");
const user = JSON.parse(raw);
console.log(user.name); // "Ada"

Pełny cykl zapisu i odczytu

Pełny schemat polega na konwersji do ciągu przy zapisie i analizowaniu go przy odczycie. Działa to zarówno w przypadku obiektów, jak i tablic.

localStorage.setItem("nums", JSON.stringify([1, 2, 3]));
const nums = JSON.parse(localStorage.getItem("nums"));
console.log(nums[0]); // 1

Obsługa przypadku null

JSON.parse(null) zwraca null (nie zgłasza błędu), ale analizowanie brakujących danych nadal może prowadzić do nieoczekiwanych wyników. Należy podać wartość domyślną.

const raw = localStorage.getItem("settings");
const settings = raw ? JSON.parse(raw) : {};

Ochrona przed uszkodzeniem danych

Jeśli zapisany JSON ma nieprawidłową składnię, JSON.parse zgłasza błąd SyntaxError. Należy umieścić go w bloku try/catch, aby jeden uszkodzony wpis nie spowodował awarii aplikacji.

function readJSON(key, fallback) {
  try { return JSON.parse(localStorage.getItem(key)) ?? fallback; }
  catch { return fallback; }
}

Wielokrotnie używany pomocnik zapisu

Krok konwersji do ciągu należy umieścić w pomocniku, aby nigdy o nim nie zapomnieć.

function saveJSON(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}
saveJSON("cart", [{ id: 1, qty: 2 }]);

Czego JSON nie przechowuje

JSON nie potrafi reprezentować funkcji, wartości undefined, obiektów Date (są zamieniane na ciągi znaków), obiektów Map ani Set. Należy odpowiednio zaplanować format danych: daty trzeba przechowywać jako ciągi ISO i odtwarzać je podczas odczytu.

const obj = { fn: () => 1, when: new Date() };
console.log(JSON.stringify(obj)); // {"when":"2026-..."}

Odtwarzanie dat

Ponieważ daty są serializowane do postaci ciągów znaków, w razie potrzeby użycia metod Date należy przekonwertować je z powrotem po analizie danych.

const data = JSON.parse(localStorage.getItem("event"));
data.when = new Date(data.when);

Aktualizowanie zagnieżdżonych danych

Aby zmienić część zapisanego obiektu, należy go odczytać, zmodyfikować kopię i ponownie zapisać. Magazyn nie udostępnia interfejsu API do częściowych aktualizacji.

const cart = JSON.parse(localStorage.getItem("cart")) || [];
cart.push({ id: 9, qty: 1 });
localStorage.setItem("cart", JSON.stringify(cart));

Wersjonowanie zapisanych struktur

Struktury danych aplikacji zmieniają się z czasem. Przechowywanie pola version pozwala migrować stare dane lub je odrzucać, gdy format ulega zmianie.

saveJSON("prefs", { version: 2, theme: "dark" });

Szybki sprawdzian

Zapisywanie obiektów w Web Storage.

Podsumowanie

Magazyn przechowuje ciągi znaków, dlatego przed zapisaniem obiektów należy użyć JSON.stringify, a podczas odczytu JSON.parse. Analizowanie danych należy zabezpieczyć za pomocą try/catch i zapewnić wartości domyślne. Trzeba pamiętać, że JSON pomija funkcje i undefined, a daty zamienia na ciągi znaków. Zagnieżdżone dane należy aktualizować przez odczyt, modyfikację i ponowny zapis, a zapisane struktury warto wersjonować.

Często zadawane pytania

Czy lekcja „Zapisywanie obiektów za pomocą JSON” jest bezpłatna?

Tak — pełny tekst „Zapisywanie obiektów za pomocą JSON” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Zapisywanie obiektów za pomocą JSON”?

Proszę serializować obiekty, aby je zapisywać i odczytywać. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Zapisywanie obiektów za pomocą JSON”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy