JavaScript Academy · Lekcja

Zdarzenia pamięci i limity

Proszę reagować na zmiany i uwzględniać limity przydziału pamięci.

Lekcja 4 z 413 kroki

Zdarzenia pamięci i limity to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 4 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.

Reagowanie na zmiany w pamięci

Zdarzenie storage pozwala jednej karcie zareagować, gdy inna karta zmieni localStorage. Umożliwia prostą synchronizację między kartami.

Nasłuchiwanie zdarzenia storage

Należy dodać nasłuchiwanie na obiekcie window. Zdarzenie jest wywoływane w INNYCH kartach tego samego originu za każdym razem, gdy zmieni się localStorage, ale nie w karcie, która dokonała zmiany.

window.addEventListener("storage", (e) => {
  console.log("Key changed:", e.key);
});

Obiekt StorageEvent

Zdarzenie zawiera właściwości key, oldValue, newValue, storageArea i url. Razem dokładnie opisują one to, co się zmieniło.

window.addEventListener("storage", (e) => {
  console.log(e.key, e.oldValue, "->", e.newValue);
});

Wywoływane tylko w innych kartach

Istnieje tu ważny szczegół: zdarzenie NIE jest wywoływane w tej samej karcie, która wywołała setItem. Służy ono do powiadamiania pozostałych kart, dlatego nie należy polegać na nim przy aktualizacjach w tej samej karcie.

Wzorzec synchronizacji między kartami

Należy używać tego zdarzenia do utrzymywania spójności kart, na przykład wylogowując użytkownika wszędzie, gdy jedna karta usunie token uwierzytelniający.

window.addEventListener("storage", (e) => {
  if (e.key === "token" && e.newValue === null) {
    logoutUI();
  }
});

Wykrywanie clear()

Gdy zostanie wykonane clear(), zdarzenie jest wywoływane z właściwością key ustawioną na null. Należy obsłużyć ten przypadek, aby zresetować wszystko.

window.addEventListener("storage", (e) => {
  if (e.key === null) resetApp();
});

Limit pamięci

Każdy origin otrzymuje ograniczony limit, zwykle około 5MB łącznie dla localStorage. Jest on znacznie mniejszy niż w IndexedDB, dlatego należy przechowywać tylko niewielkie ilości danych.

Błędy przekroczenia limitu

Przekroczenie limitu powoduje zgłoszenie wyjątku QuotaExceededError podczas wywołania setItem. Duże zapisy lub zapisy niezaufanych danych należy zawsze umieszczać w bloku try/catch.

try {
  localStorage.setItem("big", hugeString);
} catch (e) {
  console.log("Storage full:", e.name);
}

UTF-16 zajmuje dwa razy więcej miejsca

Ciągi znaków są przechowywane w kodowaniu UTF-16, więc każdy znak zajmuje około 2 bajtów. Limit 5MB mieści około 2,5 miliona znaków, a w przypadku tekstu innego niż ASCII — mniej.

Szacowanie zajętości

Zajętość można w przybliżeniu zmierzyć, sumując długości kluczy i wartości. Nie istnieje dokładne API, ale takie obliczenie zapewnia użyteczny szacunek.

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

Kiedy użyć większego rozwiązania

W przypadku dużych lub ustrukturyzowanych danych przekraczających kilka MB należy użyć IndexedDB. Web Storage najlepiej nadaje się do małych flag, preferencji i tokenów.

Szybkie sprawdzenie

Zdarzenia i limity pamięci.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Zdarzenie storage powiadamia INNE karty danego originu o zmianach w localStorage, przekazując właściwości key, oldValue i newValue (podczas czyszczenia key ma wartość null). Limity wynoszą około 5MB, a zapis po ich przekroczeniu zgłasza wyjątek QuotaExceededError, dlatego ryzykowne zapisy należy umieszczać w bloku try/catch, a większe dane przechowywać w IndexedDB.

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 „Zdarzenia pamięci i limity” jest bezpłatna?

Tak — pełny tekst „Zdarzenia pamięci i limity” 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 „Zdarzenia pamięci i limity”?

Proszę reagować na zmiany i uwzględniać limity przydziału pamięci. Ć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 4 z 4.

Ile czasu zajmuje lekcja „Zdarzenia pamięci i limity”?

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