Wypróbuj localStorage w interaktywnym środowisku, a potem skopiuj działające przykłady zapisanych ustawień, koszyka i motywu, plus obsługę JSON, limity rozmiaru, błędy i synchronizację między kartami.
localStorage to magazyn kluczy i wartości w przeglądarce, osobny dla każdego originu, który zachowuje dane po zamknięciu karty i przeglądarki. Wywołujesz setItem(key, value), aby zapisać, getItem(key), aby odczytać, removeItem(key), aby usunąć, i clear(), aby go wyczyścić. Wartości są zawsze stringami, więc obiekty opakuj w JSON.stringify i JSON.parse.
Całe Storage API na jednej karcie
Większość błędów z localStorage wynika z trzech niespodzianek: wszystko zamienia się w string, wywołanie może rzucić wyjątek, a dane są powiązane z jednym konkretnym originem. Poniższe środowisko zapisuje dane w Twojej przeglądarce, więc możesz obserwować te reguły w działaniu, a przykłady pokazują bezpieczne wzorce dla ustawień, koszyka i przełącznika motywu.
MDN dokumentuje limit 5 MiB localStorage na origin w aktualnych przeglądarkach i osobne 5 MiB dla sessionStorage. Stringi są przechowywane w UTF-16, więc liczba znaków, które się zmieszczą, jest mniejsza, niż sugeruje liczba bajtów. Zapis ponad limit rzuca QuotaExceededError.
Nie. Wpisy pozostają, dopóki Twój kod ich nie usunie lub odwiedzający nie wyczyści danych strony. W oknie prywatnym przeglądarka kasuje je po zamknięciu ostatniej prywatnej karty. Jeśli potrzebujesz wygasania, zapisz znacznik czasu razem z wartością i sprawdzaj go przy odczycie.
setItem zamienia wszystko, co przekażesz, na string. Zwykły obiekt staje się tekstem [object Object], a dane przepadają. Zapisuj JSON.stringify(obj) i odczytuj z powrotem przez JSON.parse.
Nie. Storage należy do originu, czyli schematu, hosta i portu razem. http://example.com i https://example.com mają osobne magazyny, podobnie jak subdomeny.
Nasłuchuj zdarzenia storage na window. Uruchamia się ono w innych otwartych dokumentach tego samego originu, gdy jeden z nich zmieni wartość, i zawiera key, oldValue oraz newValue. Karta, która dokonała zmiany, go nie otrzymuje.
Cookies są wysyłane na serwer z każdym żądaniem i nadają się do sesji. localStorage nigdy nie opuszcza przeglądarki, mieści więcej i nadaje się do stanu interfejsu, takiego jak motyw, szkic czy zwinięty pasek boczny.
Wybierz magazyn według tego, jak długo dane mają żyć i kto ich potrzebuje
Jedno miejsce obsługuje zablokowany storage, pełny limit i uszkodzony JSON, więc reszta Twojego kodu nie musi.
Wartości domyślne są łączone z tym, co zostało zapisane, więc dodanie później nowego ustawienia nie psuje starszych zapisanych danych.
Każda zmiana tworzy nową tablicę i zapisuje ją z powrotem. O cenach przy kasie nadal decyduje serwer.
Jeśli nic nie zapisano, wygrywa ustawienie systemu operacyjnego. Uruchom to wcześnie w head, aby uniknąć mignięcia złego motywu.
localStorage nie ma wbudowanego wygasania, więc zapisz termin razem z wartością i usuwaj nieaktualne wpisy przy odczycie.
Zdarzenie storage dociera do każdej innej karty na tym samym originie, więc licznik koszyka może się zaktualizować bez przeładowania.
Storage jest zablokowany w tej przeglądarce, więc każde wywołanie rzuciłoby wyjątek. Twój kod potrzebuje rozwiązania zapasowego.
Rzucono {name}: {message}
Najpierw wpisz klucz.
{call} zapisało znaki: {n}.
{call} zwróciło null: nie ma wpisu o tym kluczu.
JSON.parse zwrócił: {value}
Zapisany tekst nie jest JSON-em: {value}
{call} zwróciło string {value}
{call} wykonane.
Usunięto wpisy testowe: {n}. Pozostałe klucze tej strony nie zostały zmienione.
Zapisuj, odczytuj i usuwaj wpisy we własnej przeglądarce i zobacz każdy klucz, który przechowuje ta strona. Klucze testowe zaczynają się od demo:, więc nigdy nie kolidują ze stroną.
Klucz
Wartość
Typ wartości
Zwykły string
Obiekt (JSON)
Zapisz
Odczytaj
Usuń
Wyczyść klucze testowe
Wyniki pojawią się tutaj.
Wpisy testowe zapisane w Twojej przeglądarce ({n})
Zapisany string
Zacznij za darmo · Bez karty kredytowej