Jak przechowywać i pobierać dane w przeglądarce
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 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 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.