Jak przechowywać i pobierać dane w przeglądarce

Przeglądarki internetowe mogą korzystać z pamięci internetowej do przechowywania i pobierania danych lokalnie. Przechowywanie danych w przeglądarce internetowej jest bezpieczniejsze, a także poprawia wydajność strony internetowej. W przeciwieństwie do plików cookie, pamięć internetowa jest znacznie wyższa, a dane nie są przesyłane do serwera. Pamięć internetowa jest oparta na protokole i domenie, a wszystkie strony z jednego źródła mogą przechowywać i pobierać te same informacje.

W tym spisie omówi procedurę dla przechowywanie I pobieranie danych W przeglądarce. Ponadto będą dostarczane przykłady związane z wykorzystaniem lokalizacji i sessionstorage html obiekty internetowe. A więc zacznijmy!

Obiekty pamięci internetowej w przeglądarce

Dwa obiekty pamięci internetowej są dostarczane przez HTML, którego można użyć do przechowywania i pobierania danych. "Lokalny magazyn”Jest rodzajem pamięci HTML, który nie ma daty ważności, podczas gdy„SessionStorage„Obiekt przechowuj tylko informacje związane z pojedynczą sesją, co oznacza, że ​​zamknięcie bieżącej zakładki przeglądarki usunie wszystkie zapisane dane.

Przed skorzystaniem z LocalStorage i SessionStorage upewnij się, że przechowywanie internetowe HTML jest obsługiwane przez przeglądarkę:

if (typeof (pamięć) !== „Undefined”)
// Zapisz kod dla obiektów pamięci HTML
w przeciwnym razie
// Twoja przeglądarka nie jest wspierana

LocalStorage HTML Web Manage obiekt w przeglądarce

Jak wspomniano wcześniej, dane przechowywane w obiekcie LocalStorage nie mają daty ważności i nie są usunięte, nawet jeśli przeglądarka jest zamknięta. Przechowywane dane można odzyskać następnego dnia, tygodnia lub roku.

Przykład 1: Korzystanie z obiektu pamięci internetowej LocalStorage HTML w przeglądarce

W poniższym przykładzie utworzymy „Lokalny magazyn„Obiekt internetowy o„Nazwa: wartość”Para:

Wykonaj powyższy program w swoim ulubionym edytorze kodu lub dowolnej piaskownicy kodowania online; Jednak w tym celu wykorzystamy JSBin:

Jak widać z wyjścia, pomyślnie przechowyliśmy i odzyskaliśmy dane za pomocą „Lokalny magazyn„Obiekt internetowy HTML:

Możesz także wykonać następujący kod w tym samym celu:

Dostarczony przykład pokaże również to samo wyjście:

Jeśli chcesz usunąć element lub wpis z obiektu LocalStorage, musisz zadzwonić do „Usuń przedmiot()„Metoda i przejdź”nazwa„Pozycja jako argument:

Lokalny magazyn.removeItem („Nazwa”);

Przykład 2: Korzystanie z obiektu pamięci internetowej LocalStorage HTML w przeglądarce

Sprawdźmy inny przykład. W poniżej podanym programie JavaScript „Lokalny magazyn„Obiekt będzie liczył i przechowuje liczbę razy kliknięcie użytkownika„Kliknij" przycisk:

Kliknij

Kliknij przycisk, aby sprawdzić wartość licznika.

Tutaj wyjście pokazuje „Kliknij" przycisk; Kliknij na niego, aby sprawdzić wartość przyciskuClickCounter:

Początkowo wartość ButtonClickCounter została ustawiona na „0,”I będzie zwiększane za każdym razem, gdy klikniemy przycisk:

SessionStorage HTML WWW Obiekt pamięci internetowej w przeglądarce

HTML "SessionStorage„Obiekt działa tak samo jak„Lokalny magazyn„;; Możesz jednak użyć go tylko do przechowywania i pobierania danych dla bieżącej sesji. Gdy tylko otwarta karta przeglądarki zostanie zamknięta, wszystkie przechowywane dane zostaną usunięte.

Przykład 2: Korzystanie z obiektu pamięci internetowej SessionStorage HTML w przeglądarce

Poniższy program JavaScript będzie przechowywał i odzyska „ButtonClickCount”Na bieżącą sesję. ButtonClickCount jest dodawany, aby policzyć liczbę razy, gdy użytkownik kliknął podany przycisk:

Kliknij

Kliknij przycisk, aby sprawdzić wartość licznika.

Naciśnięcie podświetlonego przycisku jest pobieranie danych przechowywanych w „SessionStorage" przycisk:

Wniosek

Deweloperzy mogą korzystać Lokalny magazyn I SessionStorage Obiekty internetowe HTML do przechowywania i pobierania danych w przeglądarce. Obiekt LocalStorage nie ma daty ważności, podczas gdy SessionStorage przechowuje tylko informacje związane z pojedynczą sesją, co oznacza, że ​​zamknięcie bieżącej karty przeglądarki usunie wszystkie zapisane dane. W tym zapisie omówiono procedurę przechowywania i pobierania danych w przeglądarce. Ponadto dostarczane są również przykłady związane z LocalStorage i SessionStorage HTML Web Objects.