Czym jest local storage i jak strony go używają?

Local storage pozwala stronom zapisywać w przeglądarce dane, które zostają po jej zamknięciu. Dowiedz się, jak działa i co przechowuje.

Wersja robocza

Local storage pozwala stronom zapisywać dane bezpośrednio w przeglądarce, tak by zostawały między wizytami. Dowiedz się, jak działa, do czego strony go używają i co oznacza dla Twojej strony.

Czy zdarzyło Ci się ustawić preferencję na stronie, zamknąć kartę i wrócić później, by zastać wszystko dokładnie tak, jak zostało? Ustawienia wyświetlania były takie same, zapisane elementy nadal były na miejscu i nie trzeba było niczego konfigurować od nowa. To local storage po cichu wykonuje swoją pracę w tle.

W poprzednim rozdziale o rodzajach pamięci przeglądarkiprzedstawiliśmy local storage jako jeden z głównych sposobów, w jaki przeglądarki przechowują dane. Ten rozdział idzie głębiej: czym właściwie jest local storage, jak działa i jaką rolę pełni na Twojej stronie.

Czym jest local storage?

Local storage to rodzaj pamięci przeglądarki, który pozwala stronom zapisywać małe porcje danych bezpośrednio na urządzeniu odwiedzającego. Te dane zostają w przeglądarce nawet po zamknięciu karty lub wyłączeniu komputera. Przy następnej wizycie na tej samej stronie przeglądarka nadal ma te dane, a strona może ich użyć, by przywrócić poprzedni stan.

Tym local storage różni się od session storage, który czyści się po zamknięciu karty. Local storage jest trwały. Nie ma automatycznego wygaśnięcia. Dane zostają, dopóki użytkownik nie wyczyści przeglądarki albo dopóki sama strona ich nie usunie.

Jak działa local storage?

Local storage działa jak prosty magazyn klucz-wartość. Wyobraź sobie mały notatnik w przeglądarce, w którym strona może zapisać informację pod etykietą i z wartością. Etykieta to klucz, a zapisana pod nią informacja to wartość. Gdy strona znów potrzebuje tej informacji, wyszukuje klucz i odczytuje wartość.

Na przykład strona może zapisać klucz „theme” z wartością „dark”, gdy odwiedzający przełączy się na tryb ciemny. Gdy ten odwiedzający wróci, strona sprawdza local storage, znajduje klucz „theme”, odczytuje wartość „dark” i automatycznie stosuje tryb ciemny, zanim podstrona w pełni się wyświetli.

Każda strona ma własny, odizolowany local storage. Strona może odczytywać i zapisywać tylko własne dane. Nie widzi, co zapisała jakakolwiek inna strona. Ta izolacja to zabezpieczenie wbudowane w każdą przeglądarkę.

Do czego strony używają local storage?

Zapisywanie preferencji użytkownika

Ustawienia wyświetlania, preferencje językowe, wybory motywu i opcje układu to typowe rzeczy zapisywane w local storage. To niewrażliwe preferencje, które poprawiają doświadczenie, gdy odwiedzający wraca.

Zachowywanie elementów między sesjami

Niektóre strony używają local storage do przechowywania elementów, z którymi odwiedzający wszedł w interakcję, takich jak lista do przeczytania, lista życzeń czy ostatnio oglądane pozycje, by były na miejscu przy następnej wizycie, nawet jeśli odwiedzający nie jest zalogowany.

Ograniczanie liczby żądań do serwera

Gdy strona zapisuje informacje lokalnie, może odczytać je natychmiast z przeglądarki zamiast wysyłać żądanie do serwera za każdym razem. Przyspiesza to korzystanie dla powracających odwiedzających i zmniejsza obciążenie zaplecza.

Zachowywanie stanu w formularzach i wieloetapowych procesach

Niektóre strony używają local storage do tymczasowego zapisywania postępu w wieloetapowym formularzu lub procesie zamówienia. Jeśli odwiedzający przypadkiem zamknie kartę, jego postęp nie przepadnie po powrocie.

Jakie są ograniczenia local storage?

Local storage jest przeznaczony na małe dane. Większość przeglądarek pozwala na około 5 do 10 megabajtów na stronę, co wystarcza na preferencje i ustawienia, ale nie na duże pliki ani złożone zbiory danych. Zapisuje też tylko tekst. Liczby, obiekty i tablice trzeba najpierw zamienić na tekst, by je zapisać, a po odczytaniu zamienić z powrotem.

Local storage nie jest też właściwym miejscem na informacje wrażliwe. Ponieważ jest dostępny dla każdego skryptu uruchomionego na stronie, przechowywanie w nim haseł, danych osobowych czy płatniczych to ryzyko dla bezpieczeństwa. Dane wrażliwe należą na serwer, chronione przez SSL i odpowiednie uwierzytelnianie.

Porównanie local storage z innymi rodzajami pamięci znajdziesz w artykule rodzaje pamięci przeglądarki.

Najczęściej zadawane pytania

Czy local storage działa bez połączenia z internetem?

Tak. Local storage jest zapisany na urządzeniu odwiedzającego, a nie na serwerze. Dane są dostępne nawet wtedy, gdy przeglądarka jest offline. To jeden z powodów, dla których local storage często używa się razem z service workerami i pamięcią podręczną, by budować strony działające częściowo lub w pełni offline.

Czy local storage jest współdzielony między różnymi przeglądarkami na tym samym urządzeniu?

Nie. Local storage jest przypisany do przeglądarki. Dane zapisane w jednej przeglądarce nie są widoczne w innej na tym samym urządzeniu. Każda przeglądarka ma własny, osobny local storage. Oznacza to, że odwiedzający, który przejdzie z jednej przeglądarki do innej, nie zabierze ze sobą zapisanych preferencji ani danych.

Czy odwiedzający mogą zobaczyć lub usunąć dane z local storage?

Tak. Każdy może otworzyć narzędzia deweloperskie przeglądarki i zobaczyć lub usunąć dane local storage dowolnej strony. Odwiedzający mogą też wyczyścić wszystkie dane przeglądarki w jej ustawieniach, co całkowicie usuwa local storage. Dlatego strony nie powinny polegać na local storage jako na stałym czy gwarantowanym źródle danych.

Czym różni się local storage od cookies?

Cookies są odsyłane do serwera z każdym żądaniem, więc nadają się do zarządzania sesjami i uwierzytelniania. Local storage zostaje tylko w przeglądarce i nigdy nie jest wysyłany do serwera automatycznie. Local storage mieści też więcej danych niż cookies i nie ma wbudowanego wygaśnięcia. Każde z nich pasuje do innych zastosowań, a dobrze zbudowane strony używają obu odpowiednio.

Czy local storage wpływa na szybkość strony?

Odczyt i zapis w local storage jest bardzo szybki, więc rzadko powoduje zauważalne problemy z szybkością. Wręcz przeciwnie, używanie local storage do zapisywania preferencji i ograniczania żądań do serwera może sprawić, że strona wydaje się szybsza dla powracających odwiedzających. Wpływ na szybkość strony jest zwykle pozytywny, gdy local storage jest używany rozsądnie.

Czy muszę zarządzać local storage na swojej stronie?

Jeśli używasz kreatora stron, local storage jest zarządzany przez platformę automatycznie dla obsługiwanych funkcji. Nie musisz niczego pisać ani konfigurować. Kreator obsługuje za kulisami wszystkie preferencje i zarządzanie stanem, które używają local storage. W kreatorze stronWEMASY wszystko to jest wbudowane w sposób działania platformy.

Wykorzystaj to od razu
na własnej stronie.

Zacznij za darmo z WEMASY i zbuduj stronę w kilka minut.