LocalStorage i SessionStorage | Wyjaśnione

API Internetu i interfejs API pamięci internetowej to dwa najbardziej przydatne interfejsy API obsługiwane przez większość przeglądarek, interfejs API pamięci internetowej dowodzi dwóch obiektów Lokalny magazyn przechowywanie i SessionStorage które pomagają nam przechowywać nasze dane w pamięci przeglądarki. Oba te obiekty pozwalają nam przechowywać dane lokalne, a jedyną różnicą jest to, że w przypadku obiektu SessionStorage dane są automatycznie usuwane po wygaśnięciu sesji, podczas gdy w przypadku obiektu LocalStorage dane są trwale zapisywane.

Te obiekty można uznać za alternatywy dla plików cookie, a także mają swoje zalety w stosunku do plików cookie, mówiąc, że obiekty te mogą całkowicie wyprzedzać pliki cookie. Pliki cookie mogą być odczytywane przez serwery i inne aplikacje internetowe, podczas gdy dane przechowywane lokalnie w przeglądarce nie mogą być odczytane przez żaden serwer, który zapewnia korzyści bezpieczeństwa.

LocalStorage i SessionStorage | Składnia

Oba te obiekty mają identyczne funkcje z identycznymi składniami. Składnia obiektu Localstorage jest zdefiniowana jako

Lokalny magazyn.funkcja (klucz, wartość);

Podobnie dla obiektu SessionStorage składnia jest zdefiniowana jako

SessionStorage.funkcja (klucz, wartość);

Funkcje dostarczane przez LocalStorage i SessionStorage

Oba te obiekty z interfejsu API pamięci internetowej zapewniają 5 funkcji i zmienną stałą jako:

• setitem (): Aby przechowywać nowy wpis w lokalnej pamięci w postaci par kluczowych
• getItem (): Aby pobrać wpis z lokalnej pamięci za pomocą jego klucza
• clear (): Aby wyczyścić lokalne przechowywanie przeglądarki
• remove (): Aby usunąć wartość z lokalnej pamięci za pomocą klucza
• key (): Aby zwrócić nazwę klucza za pomocą jego wartości indeksu
• długość (): zmienna, która przechowuje liczbę wpisów w lokalnej pamięci

LocalStorage i SessionStorage | Stosowanie

Aby zademonstrować użycie interfejsu API pamięci internetowej, otwórz wybraną przeglądarkę (w naszym przypadku Chrome) i odwiedź witrynę taką jak www.Google.com.

Jak tworzyć/dodawać dane w LocalStorage za pomocą metody setItem ()

Utwórz nowy wpis danych w lokalnej pamięci, wpisując następujący wiersz kodu w konsoli przeglądarki:

Lokalny magazyn.Setitem („Nazwa”, „John Doe”);

Jeśli polecenie wykonuje się bez żadnego błędu, oznacza to, że nowy wpis został pomyślnie wykonany w pamięci przeglądarki.

Aby to zweryfikować, przejdź do zakładki „Aplikacje” w narzędziach programisty i rozszerz lokalną pamięć. Powinieneś być w stanie zobaczyć wartość w odkrywcy:

Jak uzyskać dostęp/uzyskać dane z LocalStorage za pomocą metody getitem ()

Aby uzyskać dostęp do dowolnego wpisu z lokalnej pamięci, możesz użyć operatora kropki z obiektem LocalStorage, a następnie wprowadzić klucz lub użyć funkcji getitem (). Aby uzyskać dostęp do „nazwy”, którą właśnie przechowyliśmy, możemy albo użyć:

var name = localStorage.Nazwa;
konsola.dziennik (nazwa)

Wyjście jest jak:

Lub możemy użyć polecenia, jak pokazano:

konsola.Log (LocalStorage.getItem („Nazwa”));

Wyjście jest jak

Stałe przechowywanie obiektu LocalStorage | Weryfikacja

Aby sprawdzić, czy obiekt LocalStorage przechowuje dane na stałe (aż do ręcznego usunięcia), zamknij przeglądarki, które wcześniej otworzyły link, w którym przechowywałeś pewne dane (w naszym przypadku były to Google.com)

Zakończyłeś złoty uścisk dłoni i zakończyłeś bieżące sesje ze stroną internetową, zamykając przeglądarki, ponownie otwórz przeglądarkę i przejdź do tej samej strony internetowej, a następnie przejdź do narzędzi programistycznych> Aplikacje> Miejsce przechowywania, aby sprawdzić, czy dane są nadal dostępne, czy nie :

Wszystkie powyższe kroki można wykonać za pomocą obiektu SessionStorage, ale pamiętaj, że usunie wszystkie dane, gdy sesja wygasa. Zobaczmy demonstrację.

Jak tworzyć/dodawać dane w SessionStorage za pomocą metody setItem ()

Najpierw utworzymy nowy wpis w sessionstorage z następującym wierszem kodu:

SessionStorage.setItem („Job”, „audytor”);

Konsola wyświetla „niezdefiniowany”, co oznacza, że ​​polecenie zostało pomyślnie wykonane bez żadnego błędu:

Możemy zweryfikować pamięć w zakładce pamięci masowej sesji:

Zamknij przeglądarki i ponownie otwórz ten sam link, a następnie przejdź do narzędzi programisty> Aplikacje> Pamięć sesji, zobaczysz następujące wyniki:

Widać, że wpis został usunięty, dowodzi, że obiekt SessionStorage przechowuje tylko dane dla lokalnej pamięci przeglądarki tylko dla jednej sesji.

Wniosek

Obiekty LocalStorage i SessionStorage służą do przechowywania danych w lokalnej pamięci przeglądarki i są częścią interfejsu API pamięci internetowej; Oba te obiekty zapewniają użytkownikowi 5 funkcji, które pozwala użytkownikom tworzyć, aktualizować, uzyskać i usuwać wpis z lokalnej pamięci. Różnica między obiektem LocalStorage i SessionStorage polega na tym, że obiekt LocalStorage na stałe przechowuje dane na stronie internetowej, podczas gdy obiekt Sessionstroage przechowuje tylko dane dla jednej sesji.