Mechanizm localStorage zapewnia rodzaj obiektu magazynowania sieci Web, który umożliwia przechowywanie i pobieranie danych w przeglądarce. Możesz przechowywać i uzyskiwać dostęp do danych bez wygaśnięcia; dane będą dostępne nawet po zamknięciu witryny przez użytkownika.

Zwykle uzyskujesz dostęp do localStorage za pomocą JavaScript. Za pomocą niewielkiej ilości kodu możesz zbudować przykładowy projekt, taki jak licznik wyników. To pokaże, w jaki sposób można przechowywać i uzyskiwać dostęp do trwałych danych przy użyciu tylko kodu po stronie klienta.

Co to jest localStorage w JavaScript?

Obiekt localStorage jest częścią interfejsu API magazynu WWW obsługiwanego przez większość przeglądarek WWW. Możesz przechowywać dane jako pary klucz-wartość za pomocą localStorage. Unikalne klucze i wartości powinny być w formacie UTF-16 DOM String.

Jeśli chcesz przechowywać obiekty lub tablice, musisz przekonwertować je na ciągi za pomocą JSON.stringify() metoda. Możesz przechowywać do 5 MB danych w localStorage. Ponadto wszystkie okna o tym samym pochodzeniu mogą udostępniać dane localStorage tej witryny.

instagram viewer

Przeglądarka nie usunie tych danych, nawet gdy użytkownik je zamknie. Będzie on dostępny dla serwisu, który go utworzył, podczas każdej przyszłej sesji. Nie należy jednak używać localStorage do poufnych danych, ponieważ inne skrypty działające na tej samej stronie mogą uzyskać do nich dostęp.

LocalStorage vs. sesjaStorage

The localStorage i sessionStorage obiekty są częścią interfejsu Web Storage API, który przechowuje lokalnie pary klucz-wartość. Wszystkie nowoczesne przeglądarki obsługują je obie. Dzięki localStorage dane nie wygasają nawet po zamknięciu przeglądarki przez użytkownika. Różni się to od sessionStorage, która czyści dane po zakończeniu sesji strony. Sesja strony kończy się po zamknięciu karty lub okna.

Kod użyty w tym projekcie jest dostępny w Repozytorium GitHub i jest darmowy do użytku na licencji MIT. Jeśli chcesz zobaczyć na żywo wersję projektu licznika wyników, możesz obejrzeć transmisję na żywo próbny.

Jak działa localStorage?

Dostęp do funkcji localStorage można uzyskać za pośrednictwem Window.localStorage własność. Ta właściwość udostępnia kilka metod, takich jak setItem(), getItem() i removeItem(). Możesz ich używać do przechowywania, odczytywania i usuwania par klucz/wartość.

Jak przechowywać dane w localStorage

Możesz przechowywać dane w localStorage za pomocą setItem() metoda. Ta metoda akceptuje dwa argumenty, klucz i odpowiednią wartość.

window.localStorage.setItem('Pyton', 'Guido van Rossum');

Tutaj, Pyton jest kluczem i Guido van Rossum to wartość. Jeśli chcesz przechowywać tablicę lub obiekt, będziesz musiał przekonwertować go na łańcuch. Tablicę lub obiekt można przekonwertować na ciąg znaków za pomocą JSON.stringify() metoda.

okno.localStorage.setItem('Python', 'Guido van Rossum');
stały student = {
 nazwa: "Yuvraj",
 znaki: 85,
 przedmiot: "Uczenie maszynowe"
}
stały wyniki = [76, 77, 34, 67, 88];
okno.localStorage.setItem('wynik', JSON.stringify (student));
okno.localStorage.setItem('oznaczenia', JSON.stringify (punkty));

Jak odczytywać dane z localStorage

Możesz odczytać dane z localStorage za pomocą Zdobądź przedmiot() metoda. Ta metoda akceptuje klucz jako parametr i zwraca wartość jako ciąg.

wynajmować dane1 = okno.localStorage.getItem('Python');
wynajmować dane2 = okno.localStorage.getItem('wynik');
konsola.log (dane1);
konsola.log (dane2);

Daje to następujące dane wyjściowe:

Guido van Rossum
{"Nazwa":"Yuvraj","znaki":85,"Przedmiot":"Nauczanie maszynowe"}

Jeśli chcesz przekonwertować wynik z ciągu znaków na obiekt, powinieneś użyć JSON.parse() metoda.

wynajmować dane2 = JSON.analizować(okno.localStorage.getItem('wynik'));
konsola.log (dane2);

Jak usunąć sesje localStorage

Sesje localStorage można usunąć za pomocą Usuń przedmiot() metoda. Aby usunąć parę klucz-wartość, musisz przekazać klucz jako parametr do tej metody. Jeśli klucz istnieje, metoda usunie parę klucz-wartość, a jeśli klucz nie istnieje, metoda nic nie zrobi.

window.localStorage.removeItem('Pyton');
window.localStorage.removeItem('C++');

Jak wyczyścić wszystkie elementy w localStorage

Możesz wyczyścić wszystkie elementy w pamięci lokalnej za pomocą jasne() metoda. Do tej metody nie trzeba przekazywać żadnych parametrów.

okno.Lokalny magazyn.jasne();

Jak znaleźć długość localStorage

Długość localStorage można znaleźć za pomocą localStorage.length własność.

wynajmować len = localStorage.length;
konsola.log (len);

Jak zdobyć klucz w danej pozycji?

Możesz zdobyć klucz na danej pozycji za pomocą klucz() metoda. Ta metoda akceptuje indeks jako parametr.

wynajmować d = localStorage.key(1);
konsola.log (d);

Metoda key() służy przede wszystkim do przechodzenia przez wszystkie elementy w localStorage.

Jak zapętlić wszystkie elementy w localStorage

Możesz iterować po wszystkich elementach w localStorage za pomocą pętli for.

dla (wynajmować ja = 0; i < localStorage.length; i++){
wynajmować klucz = localStorage.klucz (i);
wynajmować wartość = localStorage.getItem (klucz);
konsola.log (klucz, wartość);
}

Metoda key() przyjmuje indeks jako argument i zwraca odpowiedni klucz. Metoda getItem() przyjmuje klucz jako argument i zwraca odpowiednią wartość. Wreszcie, konsola.log() Metoda drukuje parę klucz-wartość.

Prosty projekt JavaScript oparty na localStorage

Dzięki zrozumieniu jego podstawowych metod możesz się rozwijać prosty projekt JavaScript w oparciu o localStorage. W tym projekcie utworzysz aplikację licznika punktów, która będzie zwiększać i zmniejszać liczbę punktów po kliknięciu przycisku. Ponadto zaimplementujesz funkcję usuwania wszystkich elementów w localStorage.

Stworzyć index.html oraz skrypt.js plik w nowym folderze i otwórz pliki w swoim ulubionym edytorze kodu. Użyj następującego kodu HTML, aby utworzyć interfejs dla aplikacji licznika wyników:

<!DOCTYPE html>
<html>
<ciało>
<h1>localStorage w JavaScript</h1>
<przycisk onclick="zwiększLicznik()" typ="przycisk">Zwiększ wynik</button>
<przycisk onclick="zmniejszLicznik()" typ="przycisk">Zmniejsz wynik</button>
<przycisk onclick="wyczyśćLicznik()" typ="przycisk">Wyczyść pamięć lokalną</button>
<p>Wynik:</p>
<p id="wynik"></p>
<p>Kliknij na "Zwiększ wynik" przycisk, aby zwiększyć liczbę punktów</p>
<p>Kliknij na "Zmniejsz wynik" przycisk, aby zmniejszyć liczbę punktów</p>
<p>Kliknij na "Wyczyść pamięć lokalną" przycisk, aby wyczyścić localStorage</p>
<p>
 Możesz zamknąć kartę przeglądarki (lub okno), oraz próbować ponownie.
 Zobaczysz, że dane nadal się utrzymują orazjestnie utracone nawet po zamknięciu
 przeglądarka.
</p>
<źródło skryptu="skrypt.js"></script>
</body>
</html>

Ta strona zawiera trzy przyciski: Zwiększ wynik, Zmniejsz wynik, oraz Wyczyść pamięć lokalną. Te przyciski nazywają zwiększLicznik(), zmniejszLicznik(), oraz wyczyśćLicznik() funkcje odpowiednio. Użyj poniższego kodu, aby dodać funkcje do aplikacji licznika wyników za pomocą JavaScript.

funkcjonowaćwzrostLicznik() {
var liczba = Numer(okno.localStorage.getItem("liczba"));
 liczba += 1;
 window.localStorage.setItem("liczyć", liczyć);
 document.getElementById("wynik").innerHTML = liczba;
}

The zwiększLicznik() funkcja pobiera licznik za pomocą metody getItem(). Konwertuje wynik na liczbę, ponieważ getItem() zwraca ciąg i przechowuje go w zmiennej count.

Gdy po raz pierwszy klikniesz na Zwiększ wynik przycisk będzie przed każdym wywołaniem setItem(). Twoja przeglądarka nie znajdzie liczyć klucz w localStorage, więc zwróci wartość null. Ponieważ funkcja Number() zwraca 0 dla wejścia o wartości NULL, nie wymaga żadnej specjalnej obsługi wielkości liter. Kod może bezpiecznie zwiększyć wartość licznika przed jego zapisaniem i aktualizacją dokumentu w celu wyświetlenia nowej wartości.

funkcjonowaćzmniejszyćLicznik() {
var liczba = Numer(okno.localStorage.getItem("liczba"));
 liczba -= 1;
 window.localStorage.setItem("liczyć", liczyć);
 document.getElementById("wynik").innerHTML = liczba;
}

The zmniejszLicznik() funkcja pobiera i sprawdza dane tak jak zwiększLicznik() czy. Zmniejsza liczyć zmienna o 1, która domyślnie wynosi 0.

funkcjonowaćclearCounter() {
okno.Lokalny magazyn.jasne();
 document.getElementById("wynik").innerHTML = "";
}

Wreszcie, wyczyśćLicznik() funkcja usuwa wszystkie dane z localStorage za pomocą jasne() metoda.

Zrób więcej z localStorage

Obiekt localStorage ma kilka metod, w tym setItem(), getItem(), removeItem() i clear(). Chociaż localStorage jest łatwy w użyciu, przechowywanie poufnych informacji nie jest bezpieczne. Jednak dobrym wyborem jest tworzenie projektów, które nie wymagają dużej ilości pamięci i nie zawierają żadnych poufnych informacji.

Chcesz zbudować kolejny projekt JavaScript oparty na localStorage? Oto podstawowa aplikacja z listą rzeczy do zrobienia, którą możesz tworzyć za pomocą HTML, CSS i JavaScript.