JavaScript Academy · Lekcja

Zapisywanie i odczytywanie danych

Proszę używać setItem, getItem i removeItem.

Lekcja 1 z 413 kroki

Zapisywanie i odczytywanie danych to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 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 klucz-wartość w przeglądarce

Web Storage udostępnia każdemu originowi prosty magazyn klucz-wartość w przeglądarce. Dwa interfejsy API, localStorage i sessionStorage, mają te same metody i przechowują wyłącznie ciągi znaków.

Zapisywanie za pomocą setItem

Wartość należy zapisać za pomocą setItem(key, value). Oba argumenty są ciągami znaków.

localStorage.setItem("theme", "dark");
localStorage.setItem("username", "ada");

Odczytywanie za pomocą getItem

Wartość należy pobrać za pomocą getItem(key). Jeśli klucz nie istnieje, metoda zwraca null, a nie undefined.

const theme = localStorage.getItem("theme"); // "dark"
const missing = localStorage.getItem("nope"); // null

Dostęp za pomocą właściwości

Można także odczytywać i zapisywać dane tak jak właściwości obiektu, ale forma metod jest bardziej przejrzysta i pozwala uniknąć konfliktów z wbudowanymi nazwami. Należy preferować metody.

localStorage.theme = "light";       // works
console.log(localStorage.theme);    // "light"

Usuwanie pojedynczego elementu

Pojedynczy wpis należy usunąć za pomocą removeItem(key). Usunięcie nieistniejącego klucza nie powoduje żadnych skutków.

localStorage.removeItem("username");

Usuwanie wszystkiego

clear() usuwa wszystkie klucze bieżącego originu. Należy używać tej metody ostrożnie, ponieważ nie można cofnąć jej działania.

localStorage.clear();

Wszystko jest ciągiem znaków

Magazyn przechowuje wyłącznie ciągi znaków. Liczby i wartości logiczne są konwertowane na tekst. Podczas odczytu są zwracane jako ciągi znaków, więc w razie potrzeby należy je przekonwertować.

localStorage.setItem("count", 5);
const n = localStorage.getItem("count"); // "5" (string)
const num = Number(n);                    // 5

Zliczanie kluczy

Właściwość length informuje, ile kluczy jest przechowywanych, a key(index) zwraca nazwę klucza na danej pozycji. Jest to przydatne podczas iteracji.

console.log(localStorage.length);
const firstKey = localStorage.key(0);

Iterowanie po magazynie

Należy przejść w pętli przez wszystkie zapisane klucze za pomocą length i key(). Wartość każdego z nich należy odczytywać w trakcie iteracji.

for (let i = 0; i < localStorage.length; i++) {
  const k = localStorage.key(i);
  console.log(k, localStorage.getItem(k));
}

Sprawdzanie istnienia

Ponieważ brakujący klucz zwraca null, jego obecność można sprawdzić za pomocą prostego porównania.

if (localStorage.getItem("token") !== null) {
  console.log("user has a token");
}

Tylko w obrębie tego samego originu

Zakres magazynu obejmuje origin (scheme + host + port). Jedna witryna nie może odczytać magazynu innej witryny, a http i https są traktowane jako różne originy.

Szybki sprawdzian

Odczytywanie i zapisywanie danych w Web Storage.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Web Storage to magazyn ciągów znaków w formie klucz-wartość, przypisany do originu. Należy używać metod setItem, getItem (zwraca null, jeśli klucza brakuje), removeItem i clear. Po kluczach można iterować za pomocą length i key(i). Wszystko jest ciągiem znaków, dlatego typy należy konwertować samodzielnie, a magazyn jest odizolowany dla każdego originu.

Bezpłatny start

Ucz się JavaScript dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 59
Lekcje: 200

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Zapisywanie i odczytywanie danych” jest bezpłatna?

Tak — pełny tekst „Zapisywanie i odczytywanie danych” 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 i odczytywanie danych”?

Proszę używać setItem, getItem i removeItem. Ć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 1 z 4.

Ile czasu zajmuje lekcja „Zapisywanie i odczytywanie danych”?

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