Pamięć lokalna HTML5, jak wyczyścić. Korzystanie z localStorage na potrzeby JavaScript

Tłumaczenie artykułu: Jak korzystać z pamięci lokalnej dla JavaScript.
Sara Vieira.

Poznanie podstaw programowania JavaScript często zaczyna się od stworzenia prostych aplikacji, takich jak elektroniczny notatnik, w którym rejestrujemy rzeczy i zdarzenia, o których być może zapomnimy. Ale takie aplikacje charakteryzują się jednym problemem - po ponownym załadowaniu strony lista wszystkich pozostawionych wcześniej wpisów znika, czyli aplikacja wraca do stanu pierwotnego.

Istnieje bardzo proste wyjście z tej sytuacji, które polega na wykorzystaniu lokalnego mechanizmu przechowywania localStorage. Z uwagi na to, że localStorage umożliwia nam przechowywanie niezbędnych danych na komputerze użytkownika, lista zaplanowanych zadań i zdarzeń wspomniana powyżej będzie nadal dostępna po przeładowaniu strony, dodatkowo localStorage to zaskakująco bardzo prosty sposób przechowywania danych i uzyskaj do niego dostęp w razie potrzeby.

Co to jest localStorage?

Jest to lokalny mechanizm przechowywania danych będący częścią technologii Web Storage zapewnianej przez specyfikację HTML5. W tej specyfikacji dozwolone są dwie opcje przechowywania danych:

Lokalny magazyn: pozwala na zapisywanie informacji bez ograniczeń dotyczących okresów przechowywania. Z tej opcji skorzystamy, ponieważ lista zadań w naszym przykładzie musi być przechowywana na stałe.
Korzystanie z sesji: zapewnia bezpieczeństwo danych tylko przez okres jednej sesji, czyli po zamknięciu przez użytkownika zakładki naszej aplikacji i ponownym jej otwarciu, wszystkie informacje niezbędne do dalszego działania aplikacji zostaną usunięte.

Mówiąc najprościej, jedyne, co robi Web Storage, to przechowywanie danych w formularzu nazwany klucz/wartość lokalnie i w przeciwieństwie do dwóch pozostałych metod, z których każda ma swoje wady ( Przechowywanie informacji o sesji wiąże się z wykorzystaniem do tego strony serwera, ponadto po zamknięciu sesji użytkownika informacja ta jest usuwana, a pliki cookies, choć do przechowywania wykorzystują stronę klienta, nie są niezawodne, ponieważ użytkownik może zrezygnować z ich obsługi poprzez ustawienia przeglądarki. ) zapisuje dane nawet w tym przypadku, jeśli zamknąłeś przeglądarkę lub wyłączyłeś komputer. ( *Pozwoliłem sobie na nieznaczną zmianę i uzupełnienie treści tego akapitu, gdyż uważam, że autor popełnił nieścisłości w oryginale.)

HTML

Jeśli pozostaniemy przy naszym przykładzie, w którym chcemy stworzyć elektroniczną wersję notatnika, to poniżej znajdują się wszystkie niezbędne komponenty do jego realizacji:

Pole do wprowadzania nowych wpisów (zdarzenia, zadania itp.).
Przycisk potwierdzający wprowadzony wpis.
Przycisk umożliwiający wyczyszczenie już utworzonej listy rzeczy do zrobienia.
Lista nieuporządkowana, która będzie uzupełniana o elementy w postaci nowych wpisów.
Na koniec potrzebujemy elementu div jako kontenera zawierającego komunikaty, które będą wyświetlane użytkownikowi, na przykład ostrzeżenie, że zapomniał wpisać wartość kolejnego wpisu, pozostawiając pole wejściowe puste.

W rezultacie nasz znacznik powinien wyglądać mniej więcej tak:

Jest to całkowicie standardowy szablon HTML, który możemy wypełnić dynamicznie generowaną treścią za pomocą JavaScript.

JavaScript

Biorąc pod uwagę strukturę prostej aplikacji notatnika w naszym przykładzie, pierwszą rzeczą, którą musimy zrobić, to zapewnić śledzenie zdarzenia kliknięcia przycisku "Dodaj notatkę" i sprawdź, czy w polu tekstowym wpisu nie została wpisana jakakolwiek informacja, czyli w momencie naciśnięcia przycisku nie powinna być ona pusta. Coś takiego:

$("#dodaj").click(funkcja() (
//jeśli pole tekstowe jest puste
$("#alarm").html(" Uwaga! Wpisz wpis w formie tekstowej
pole.");
zwróć fałsz;
}

To właśnie robimy z tym fragmentem kodu. Po naciśnięciu przycisku "Dodaj notatkę" sprawdzamy, czy użytkownik wprowadził coś w nowym polu wprowadzania. Jeżeli tego nie zrobił to pojawi się element div, który udostępniliśmy do wyświetlania komunikatów informując użytkownika, że pole wprowadzania wpisu nie jest wypełnione, a następnie po 1000ms (1 sekunda) element div i odpowiednio komunikat, znika. Funkcja następnie zwraca false , po czym przeglądarka przestaje wykonywać resztę skryptu, a aplikacja jest ponownie gotowa do wprowadzenia nowego wpisu.

Kolejnym naszym krokiem będzie dodanie wartości wpisanej w polu wejściowym na początek listy poprzez wygenerowanie nowego elementu listy. Dzięki temu, gdy użytkownik doda kolejny wpis, będzie on zawsze umieszczony na początku listy planowanych zadań i oczekiwanych zdarzeń. Następnie pozostaje nam już tylko zapisać listę za pomocą mechanizmu localStorage:

// Dodaj wpis do istniejącej listy
$("#do zrobienia").prepend("

„+Opis+”

");
// Wyczyść pole wejściowe
$("#formularz").reset();

zwróć fałsz;
});

Jak zapewne zauważyłeś, nie ma tu nic niezwykłego, używana jest standardowa wersja kodu jQuery. Gdy uzyskujemy dostęp do obiektu localStorage, musimy określić dane, które przechowujemy, w formie klucza/wartości. Możesz użyć dowolnej nazwy klucza i ja ją nazwałem „wszystko”, to musimy wskazać, co tak naprawdę potrzebujemy przechowywać w pamięci. W tym przypadku jest to kompletny fragment znacznika HTML zawarty na nieuporządkowanej liście (znajdującej się pomiędzy tagami), za pomocą której wyświetlane są wszystkie wpisy wprowadzone wcześniej przez użytkownika. Z kodu widać, że po prostu pobieramy potrzebny nam fragment metodą jQuery .html() i na koniec po wykonaniu wszystkich niezbędnych czynności ustawiamy wartość zwracaną funkcji na false , co uniemożliwia przesłanie danych z formularza przed przesłaniem i tym samym ponownym załadowaniem naszej strony.

Załóżmy teraz, że nasz użytkownik dokonał już kilku wpisów i dla dalszego normalnego działania aplikacji musimy sprawdzić, czy localStorage zawiera informacje zapisane wcześniej na komputerze i jeśli tak, wyświetlić je użytkownikowi. Ponieważ nasza nazwa klucza to „todos”, powinniśmy sprawdzić jego istnienie w następujący sposób:

// jeśli w pamięci lokalnej znajdują się już dane, wyświetl je

}

Aby sprawdzić dostępność danych, używaliśmy zwykłej instrukcji if i jeśli określony przez nas warunek został spełniony, po prostu pobieraliśmy wszystkie dane z pamięci lokalnej, umieszczając je jako znaczniki HTML na nieuporządkowanej liście, która wyświetla wpisy wcześniej wprowadzone przez użytkownik.

Jeśli sprawdzisz działanie swojej prostej aplikacji, przekonasz się, że po ponownym załadowaniu strony wszystko pozostaje na swoim miejscu. I teraz ostatnią rzeczą, którą musimy zrobić, to stworzyć funkcję, za pomocą której użytkownik w razie potrzeby będzie mógł usunąć wszystkie swoje wpisy. Jest to realizowane poprzez wyczyszczenie localStorage i ponowne załadowanie strony w celu aktywowania wprowadzonych zmian. Następnie podobnie jak w poprzednim przypadku jako wartość zwracaną przez funkcję ustawiamy false, co zapobiega pojawieniu się hasha w adresie URL. ( *i nie przewija strony w górę.):

// Całkowite oczyszczenie localStorage
okno.localStorage.clear();
lokalizacja.przeładuj();
zwróć fałsz;
});

W rezultacie mamy w pełni funkcjonalną aplikację. A składając wszystkie powyższe fragmenty w całość otrzymamy kompletny kod aplikacji:

$("#dodaj").click(funkcja() (
var Opis = $("#opis").val();
if($("#opis").val() == "") (
$("#alarm").html(" Uwaga! Wprowadź wpis w
pole tekstowe.");
$("#alert").fadeIn().delay(1000).fadeOut();
zwróć fałsz;
}
$("#do zrobienia").prepend("

"
+ Opis + "

");
$("#formularz").reset();
var todos = $("#todos").html();
localStorage.setItem("do zrobienia", do zrobienia);
zwróć fałsz;
});

if(localStorage.getItem("todos")) (
$("#todos").html(localStorage.getItem("todos"));
}

$("#wyczyść").click(funkcja() (
okno.localStorage.clear();
lokalizacja.przeładuj();
zwróć fałsz;
});

Obsługa przeglądarki.

Specyfikacja HTML5 zapewnia dość potężne wsparcie dla technologii Web Storage, dzięki czemu jest implementowana także przez większość popularnych przeglądarek, nawet IE8. Jedynym problemem pozostaje IE7, jeśli nadal jesteś zainteresowany.

Wniosek.

W tak małych aplikacjach mechanizm localStorage może z powodzeniem zastąpić wykorzystanie baz danych. Aby przechowywać niewielkie ilości danych, nie jest konieczne stosowanie bardziej złożonych alternatyw.

*Nota tłumacza.

Wyświetlenia wpisu: 475

Wysłałem Ci artykuł z historią o HTML5 LocalStorage w przeglądarkach. Oddajemy mu głos.

Starałem się napisać najprostszy i najbardziej zrozumiały poradnik korzystania z technologii localStorage. Artykuł okazał się dość krótki, ponieważ sama technologia i sposoby pracy z nią nie są skomplikowane. Aby zacząć, wystarczy znać trochę JavaScript. Poświęć zatem 10 minut na ten artykuł i możesz bezpiecznie dodać do swojego CV wiersz „Potrafię pracować z localStorage”.

Co to jest localStorage?

Tak wygląda obiekt JavaScript:

Var myCar = ( koła: 4, drzwi: 4, silnik: 1, nazwa: „Jaguar”)

A tak wygląda JSON. Prawie tak samo jak zwykły obiekt js, tylko wszystkie właściwości muszą być ujęte w cudzysłów.

( "firstName": "Iwan", "nazwisko": "Iwanow", "adres": ( "streetAddress": "Moskovskoe sh., 101, m. 101", "miasto": "Leningrad", "kod pocztowy": 101101 ), "Numery telefonu": [ "812 123-1234", "916 123-4567" ] )

Aby zrozumieć, czym jest localStorage, wyobraź sobie, że masz wbudowany w przeglądarkę taki obiekt, z którego możemy skorzystać. Jednocześnie obiekt ten nie czyści wartości, które tam zapiszemy, jeśli ponownie załadujemy stronę lub nawet całkowicie zamkniemy przeglądarkę.

W języku JavaScript localStorage jest właściwością globalnego obiektu przeglądarki (okna). Można uzyskać do niego dostęp jako window.localStorage lub po prostu localStorage.

Warto również powiedzieć, że przeglądarka ma klon localStorage o nazwie sessionStorage. Jedyna różnica polega na tym, że ta ostatnia przechowuje dane tylko dla jednej zakładki (sesji) i po prostu wyczyści jej miejsce, gdy tylko zamkniemy zakładkę

Przyjrzyjmy się temu na żywo. Na przykład w Google Chrome musisz otworzyć DevTools (F12), przejść do zakładki „Zasoby”, a w lewym okienku zobaczysz localStorage dla tej domeny i wszystkie wartości, które ona zawiera.

Przy okazji, powinieneś wiedzieć, jak localStorage współpracuje z domenami. Dla każdej domeny Twoja przeglądarka tworzy własny obiekt localStorage i można go edytować lub przeglądać tylko w tej domenie. Na przykład domena mydomain-1.com nie może uzyskać dostępu do localStorage Twojej mydomain-2.com .

Dlaczego potrzebuję localStorage?

LocalStorage jest potrzebny tylko do jednego - do przechowywania określonych danych pomiędzy sesjami użytkowników. Możesz wymyślić tysiąc rzeczy, które można przechowywać w lokalnej pamięci przeglądarki. Na przykład gry przeglądarkowe, które wykorzystują go jako plik zapisu lub rejestrują moment, w którym użytkownik zatrzymał się podczas oglądania wideo, różne dane do formularzy itp.

Jak rozpocząć korzystanie z localStorage?

Bardzo prosta.

Praca z localStorage jest bardzo podobna do pracy z obiektami w JavaScript. Istnieje kilka metod pracy z nim.

localStorage.setItem("klucz", "wartość")

Metoda, która dodaje nowy klucz z wartością do localStorage (a jeśli taki klucz już istnieje, to nadpisuje go nową wartością). Piszemy na przykład localStorage.setItem('myKey', 'myValue');

localStorage.getItem("klucz")

Pobieramy określoną wartość z magazynu kluczy.

localStorage.removeItem("Klucz")

Wyjmowanie klucza

localStorage.clear()

Czyszczenie całej pamięci

Teraz możesz otworzyć w przeglądarce zakładkę localStorage i samodzielnie poćwiczyć rejestrowanie i odzyskiwanie danych z tego magazynu. Jeśli coś się stanie, zapiszemy cały kod w pliku js.

//Dodaj lub zmień wartość: localStorage.setItem("myKey", "myValue"); //teraz masz klucz „myKey” o wartości „myValue” przechowywany w localStorage //Wypisz go na konsoli: var localValue = localStorage.getItem("myKey"); konsola.log(wartośćlokalna); //"mojaWartość" //usuń: localStorage.removeItem("myKey"); //wyczyść całą pamięć localStorage.clear() To samo, tylko z nawiasami kwadratowymi: localStorage["Key"] = "Value" //ustawienie wartości localStorage["Key"] //Pobranie wartości usuń localStorage[" Klucz"] // Usuń wartość

Chciałbym również zauważyć, że localStorage świetnie współpracuje ze strukturami zagnieżdżonymi, na przykład obiektami.

//utwórz obiekt var obj = ( pozycja1: 1, pozycja2: , pozycja3:"cześć" ); var serialObj = JSON.stringify(obj); //serializuj go localStorage.setItem("myKey", serialObj); //zapisz go w pamięci za pomocą klucza „myKey” var returnObj = JSON.parse(localStorage.getItem("myKey")) //przeanalizuj go ponownie jako obiekt

Powinieneś także wiedzieć, że przeglądarki przydzielają 5MB na localStorage. A jeśli go przekroczysz, otrzymasz wyjątek QUOTA_EXCEEDED_ERR. Przy okazji możesz za jego pomocą sprawdzić, czy w Twojej pamięci jest jeszcze miejsce.

Spróbuj ( localStorage.setItem("klucz", "wartość"); ) catch (e) ( if (e == QUOTA_EXCEEDED_ERR) ( alert("Przekroczono limit"); ) )

Zamiast wniosków

Chciałbym, żeby deweloperzy z tego krótkiego artykułu wyciągnęli prosty wniosek, że tę technologię można już w pełni wykorzystać w swoich projektach. Ma dobrą standaryzację i doskonałe wsparcie, które rozwija się dopiero z czasem.

Bardzo często pierwszą aplikacją JavaScript jest lista Todo, jednak problem z takimi aplikacjami polega na tym, że po odświeżeniu strony wszystkie elementy listy znikają.

Prostym rozwiązaniem tego problemu jest użycie Lokalny magazyn(Lokalny magazyn). Pamięć lokalna umożliwia przechowywanie danych na komputerze użytkownika i łatwe pobranie z niego listy po odświeżeniu strony. W tym artykule napiszemy małą listę rzeczy do zrobienia, korzystając z pamięci lokalnej.

Co to jest pamięć lokalna?

Pamięć lokalna („pamięć internetowa”) była pierwotnie częścią specyfikacji HTML5, ale obecnie została przeniesiona do osobnej specyfikacji. Istnieją dwa sposoby przechowywania danych:

Lokalny magazyn: pamięć trwała, tego będziemy używać.
Przechowywanie sesji: przechowuje dane tylko dla tej sesji, jeśli użytkownik zamknie stronę, dane zostaną utracone.

Local Storage umożliwia przechowywanie danych w postaci par klucz-wartość na komputerze użytkownika, a dane te będą dostępne nawet po zamknięciu przeglądarki lub wyłączeniu komputera.

HTML

Aby stworzyć listę rzeczy do zrobienia potrzebujemy:

Wprowadzanie tekstu umożliwiające wprowadzenie zawartości elementu.
Przycisk umożliwiający dodanie pozycji do listy.
Przycisk umożliwiający wyczyszczenie listy.
Sama lista (
- I dodatkowy div pokazujący błędy.
Zatem znacznik HTML będzie wyglądał następująco:
Dość prosta struktura, którą ożywimy za pomocą JavaScript.
Ponieważ używamy jQuery, musimy go dodatkowo podłączyć.
JavaScript
Najpierw musimy prześledzić kliknięcie przycisku dodawania i sprawdzić, czy pole wejściowe nie jest puste:
$("#add").click(funkcja() ( var Opis = $("#opis").val(); if($("#opis").val() == "") ( $( "#alarm").html(" Ostrzeżenie! Zostawiłeś zadanie do wykonania puste"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )
Ten kod sprawdza wartość wprowadzonego tekstu i jeśli jest pusta, wyświetla błąd i zwraca wartość false, dzięki czemu reszta kodu nie zostanie wykonana, a element nie zostanie dodany do listy.
// wstaw wpis $("#todos").prepend("
„+Opis+”
"); // usuń wszystko, co pozostało w polu tekstowym $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos ); zwróć fałsz; ));
Aby pracować z pamięcią lokalną, musisz podać klucz i odpowiadającą mu wartość. W naszym przypadku nazwijmy klucz „todos”, a wartością będzie cały kod HTML zawarty na liście (w tagu
- „+Opis+”

TJ.	Firefoksa	Safari	Chrom	Opera	iPhone'a	Android
–	–	4.0+	4.0+	10.5+	3.0+	2.0+

Pamięć lokalna HTML5, jak wyczyścić. Korzystanie z localStorage na potrzeby JavaScript

Co to jest localStorage?

HTML

JavaScript

Obsługa przeglądarki.

Wniosek.

Co to jest localStorage?

Dlaczego potrzebuję localStorage?

Jak rozpocząć korzystanie z localStorage?

Zamiast wniosków

Co to jest pamięć lokalna?

HTML

JavaScript

Obsługa przeglądarki

Wniosek

Krótka historia pamięci lokalnej przed HTML5

Korzystanie z pamięci HTML5

Monitorowanie obszaru przechowywania HTML5

Ograniczenia w obecnych przeglądarkach

Pamięć HTML5 w akcji

Poza parami klucz/wartość: wizja konkurencji