Narzędzia JavaScript: localStorage i sessionStorage

Pranay Kapgate2022-06-01 · 9 min read

Narzędzia JavaScript: localStorage i sessionStorage

JavaScript (często skracany do JS) to jeden z fundamentów nowoczesnej infrastruktury sieciowej. Jest to lekki, interpretowany, obiektowy język programowania, który obsługuje funkcje pierwszej klasy. JavaScript jest najbardziej znany ze swojej implementacji na dynamicznych stronach internetowych. Ze względu na swoje funkcje JavaScript jest jednak używany również w środowiskach innych niż przeglądarki.

W tym przewodniku omówimy szczegółowo dwa obiekty JavaScript: localStorage oraz sessionStorage.

Przegląd localStorage i sessionStorage

Obiekty localStorage oraz sessionStorage są oferowane jako część interfejsu API pamięci masowej sieci Web (web storage API). To świetne narzędzie do lokalnego przechowywania par klucz-wartość. Korzystanie z localStorage oraz sessionStorage to świetna alternatywa dla plików cookie. Takie podejście oferuje dodatkowe korzyści:

Dane są przechowywane lokalnie i nie mogą być odczytywane przez serwer. Eliminuje to problemy z bezpieczeństwem związane z plikami cookie.
Pozwala na większą pojemność pamięci (do 10 MB dla większości nowoczesnych przeglądarek).
Prosta i przejrzysta składnia.

Obiekty te są obsługiwane przez wszystkie nowoczesne przeglądarki internetowe, więc nie będzie problemu z kompatybilnością przeglądarek. Pliki cookie są nadal przydatne w wielu sytuacjach, na przykład przy uwierzytelnianiu. Istnieją jednak sytuacje, w których localStorage oraz sessionStorage oferują lepsze rozwiązania.

Wymagania wstępne

Aby wykonać kroki przedstawione w tym samouczku, będziesz potrzebować następujących komponentów:

Prawidłowo skonfigurowany serwer Linux. Ten przewodnik demonstruje konfigurację własnego serwera Ubuntu na CloudSigma.
Node.js jako środowisko uruchomieniowe JavaScript. Dowiedz się więcej o instalacji Node.js na Ubuntu tutaj.
A nowoczesna przeglądarka internetowa, na przykład Google Chrome lub Firefox.

Na potrzeby demonstracji przygotowaliśmy przykładową stronę internetową z dołączonym skryptem JS. Możesz dowiedzieć się więcej o dodawaniu JavaScript do pliku HTML tutaj:

tree_struct

VS 1

Jeśli chodzi o edytor tekstu, będziemy używać Visual Studio Code:

Web 1

Jaka jest różnica między localStorage a sessionStorage?

Zarówno localStorage oraz sessionStorage pochodzą z tego samego API. Ich zachowanie również jest identyczne. Jedyną różnicą jest sposób, w jaki każdy obiekt pozwala na trwałość danych. W przypadku sessionStorage, dane są przechowywane do momentu zamknięcia okna lub karty. W przypadku localStorage, dane są przechowywane do momentu wyczyszczenia pamięci podręcznej przeglądarki lub wyczyszczenia ich przez aplikację internetową.

W tym samouczku skupimy się głównie na localStorage. Jednak składnia dla sessionStorage jest taka sama. Pokażemy, jak tworzyć, odczytywać i aktualizować pary klucz/wartość za pomocą localStorage.

Krok 1 – Tworzenie wpisów

Możemy zadeklarować wpis w obiekcie localStorage za pomocą setItem(). Ta metoda przyjmuje dwa argumenty: klucz i odpowiadającą mu wartość. Struktura metody jest następująca:

localStorage.setItem(<key>, <value>)

1	localStorage.setItem(<key>, <value>)

W poniższym przykładzie utworzyliśmy zmienną key. Używając metody setItem(), ustawiliśmy nowy key i przypisaliśmy mu wartość ‘value’:

let key = 'item_1';
localStorage.setItem(key, 'value');

1 2	let key = 'item_1'; localStorage.setItem(key, 'value');

VS 2

Krok 2 – Odczytywanie wpisów

Jak teraz odczytać wartość zapisaną w kluczu? Aby pobrać klucz z localStorage, użyjemy metody getItem(). Przyjmuje ona nazwę klucza i zwraca wartości w nim przechowywane. Użyjemy metody alert() do wyświetlenia pobranej zawartości:

let myItem = localStorage.getItem(key);
alert(myItem);

1 2	let myItem = localStorage.getItem(key); alert(myItem);

VS 3

Następnie otwórz stronę internetową w przeglądarce. Powinna ona pokazać wartość zapisaną w key:

Web 2

Krok 3 – Aktualizowanie wpisów

Po ustawieniu wartości pozostanie ona niezmieniona, chyba że zostanie zmodyfikowana. Jeśli ponownie użyjemy metody setItem() na tym samym key , automatycznie zastąpi ona starą wartość nową.

W poniższym przykładzie key jest najpierw inicjowany z wartością ‘value’. W następnej linii ponownie wywołaliśmy setItem() i ustawiliśmy wartość na ‘new value’:

let key = 'item_1';
localStorage.setItem(key, 'value');
localStorage.setItem(key, 'new value');
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

localStorage.setItem(key, 'value');

localStorage.setItem(key, 'new value');

let myItem = localStorage.getItem(key);

alert(myItem);

VS 4

Zobaczmy, co się stanie, gdy uruchomimy ten kod w przeglądarce:

Web 3

Jak widzimy, wartość klucza jest ustawiona na ‘nową wartość’.

Krok 4 – Usuwanie wpisów

Jeśli w localStorage (oraz sessionStorage również) znajduje się wiele wpisów, które nie są już potrzebne, zaleca się ich późniejsze wyczyszczenie. Zwalnia to więcej miejsca do późniejszego wykorzystania. Aplikacja staje się również bardziej wydajna pod względem pamięci.

Aby usunąć wpis z localStorage, istnieje dedykowana metoda removeItem(). Przyjmuje ona klucz jako argument i usuwa go z puli danych localStorage :

localStorage.removeItem(<key_to_remove>)

1	localStorage.removeItem(<key_to_remove>)

Zaimplementujmy to w naszym skrypcie:

let key = 'item_1';
localStorage.setItem(key, 'value');
localStorage.removeItem(key);
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

localStorage.setItem(key, 'value');

localStorage.removeItem(key);

let myItem = localStorage.getItem(key);

alert(myItem);

VS 5

Po uruchomieniu wynik to null, ponieważ nie istnieje żadna wartość dla klucza:

Web 4

Krok 5 – Czyszczenie wpisów

W poprzednim przykładzie usunęliśmy tylko jeden klucz. Jednak localStorage pozwala na wyczyszczenie wszystkich przechowywanych elementów w jednym kroku. Aby wyczyścić wszystkie wpisy, localStorage oferuje metodę clear(). Nie przyjmuje ona żadnego argumentu:

localStorage.clear();

1	localStorage.clear();

Uruchommy tę metodę w działaniu:

let key = 'item_1';
localStorage.setItem(key, 'value');
localStorage.clear();
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

localStorage.setItem(key, 'value');

localStorage.clear();

let myItem = localStorage.getItem(key);

alert(myItem);

VS 6

Podobnie jak wcześniej, usuwa to wszystkie wpisy z localStorage, więc przy próbie uzyskania dostępu do wartości klucza, zwracane jest null:

Web 5

Krok 6 – Praca z JSON

Przechowywanie obiektów i tablic

Obiekty localStorage i sessionStorage mogą przechowywać tylko wartości tekstowe. Czasami jednak trzeba pracować z obiektami lub tablicami. W takim przypadku musimy przekonwertować je na ciąg znaków.

JavaScript oferuje funkcję JSON.stringify() która przyjmuje tablicę/obiekt i konwertuje ją na ciąg znaków. Ten wpis zawiera szybki przegląd formatu JSON. Aby uzyskać bardziej szczegółowy przewodnik, możesz przeczytać JSON w JavaScript.

W tym przykładzie utworzyliśmy obiekt sampleObj z dwoma polami name i location. Przekonwertujemy go na ciąg znaków i zapiszemy pod kluczem:

let key = 'item_1';
let sampleObj = { name: "Jason", location: "Sweden" };
localStorage.setItem(key, JSON.stringify(sampleObj));
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

let sampleObj = { name: "Jason", location: "Sweden" };

localStorage.setItem(key, JSON.stringify(sampleObj));

let myItem = localStorage.getItem(key);

alert(myItem);

VS 7

W tym przypadku wynikiem będzie ciąg znaków zawierający dane obiektu:

Web 6

Odczytywanie obiektów i tablic

Podczas zapisywania konwertowaliśmy obiekty i tablice na ciągi znaków. Możemy również pobrać ten ciąg znaków i przekonwertować go z powrotem do oryginalnego formatu. Aby to zrobić, użyjemy metody JSON.parse(). Przyjmuje ona ciąg znaków i konwertuje go z powrotem na format JSON:

let key = 'item_1';
let sampleObj = { name: "Jason", location: "Sweden" };
localStorage.setItem(key, JSON.stringify(sampleObj));
let myItem = JSON.parse(localStorage.getItem(key));
alert(JSON.stringify(myItem, null, " "));

let key = 'item_1';

let sampleObj = { name: "Jason", location: "Sweden" };

localStorage.setItem(key, JSON.stringify(sampleObj));

let myItem = JSON.parse(localStorage.getItem(key));

alert(JSON.stringify(myItem, null, " "));

VS 8

Jeśli chodzi o wynik, przekonwertowaliśmy go ponownie na ciąg znaków i sformatowaliśmy dla lepszej czytelności:

Web 7

Krok 7 – Sprawdzanie obecności elementu w localStorage

W tej sekcji przedstawimy prosty test pozwalający ustalić, czy localStorage i sessionStorage zawiera jakikolwiek element, czy nie. Używając prostej if instrukcji, możemy sprawdzić długość localStorage lub sessionStorage. Jeśli istnieją elementy, długość będzie większa niż 0.

Najpierw zaimplementuj następujący przykład:

let key = 'item_1';
localStorage.setItem(key, 'new_value');
if(localStorage.length > 0){
alert('true');
}
else{
alert('false');
}

let key = 'item_1';

localStorage.setItem(key, 'new_value');

if(localStorage.length > 0){

alert('true');

}

else{

alert('false');

}

VS 9

W tym przypadku wynikiem będzie ‘true’ ponieważ istnieje jeden klucz w localStorage:

Web 8

Krok 8 – Iterowanie po elementach

Obiekty localStorage i sessionStorage przechowują klucze w strukturze przypominającej tablicę. Nie obsługują one metody forEach, więc będziemy musieli zastosować klasyczną technikę użycia pętli for do iteracji po każdym elemencie.

W poniższym przykładzie sprawdzimy, czy obiekt localStorage jest pusty, czy nie. Jeśli nie jest pusty, dokonamy iteracji po każdym elemencie:

let key = 'item_1';
localStorage.setItem(key, 'new_value');
if(localStorage.length > 0){
for(i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
let myItem = localStorage.getItem(key);
alert(key);
}
}
else{
alert('false');
}

let key = 'item_1';

localStorage.setItem(key, 'new_value');

if(localStorage.length > 0){

for(i = 0; i < localStorage.length; i++){

let key = localStorage.key(i);

let myItem = localStorage.getItem(key);

alert(key);

}

else{

alert('false');

}

VS 10

Wynik pokaże wszystkie elementy jeden po drugim:

Web 9

Krok 9 – Sprawdzenie wsparcia przeglądarki

Możemy sprawdzić wsparcie dla localStorage (oraz sessionStorage) poprzez sprawdzenie, czy jest dostępny w obiekcie window. Prosta instrukcja if załatwi sprawę:

if(window.localStorage){
alert(true);
}
else{
alert(false);
}

if(window.localStorage){

alert(true);

}

else{

alert(false);

}

VS 11

Uruchom kod w przeglądarce internetowej:

Web 10

Podsumowanie

Ten poradnik pokazał, jak używać obiektów localStorage i sessionStorage w języku JavaScript do przechowywania par klucz/wartość w przeglądarce. Ich składnia jest znacznie prostsza w użyciu. Pokazaliśmy, jak tworzyć, usuwać i aktualizować pary klucz/wartość. Omówiliśmy również przechowywanie obiektów i tablic poprzez konwertowanie ich na ciągi znaków (i odwrotnie).

Aby dalej pogłębiać swoją wiedzę o JavaScript, możesz zapoznać się z następującymi poradnikami na naszym blogu:

Miłego kodowania!

Pranay Kapgate

Autor · CloudSigma

Preslav Dobrev jest projektantem kreatywnym w CloudSigma, skupiającym się na spójnej tożsamości biznesowej przy wykorzystaniu tradycyjnych i innowacyjnych kanałów marketingowych. Biegle łączy wizję artystyczną ze strategicznym marketingiem, tworząc wywierające wpływ narracje marki.

Narzędzia JavaScript: localStorage i sessionStorage

Przegląd localStorage i sessionStorage

Wymagania wstępne

Jaka jest różnica między localStorage a sessionStorage?

Krok 1 – Tworzenie wpisów

Krok 2 – Odczytywanie wpisów

Krok 3 – Aktualizowanie wpisów

Krok 4 – Usuwanie wpisów

Krok 5 – Czyszczenie wpisów

Krok 6 – Praca z JSON

Przechowywanie obiektów i tablic

Odczytywanie obiektów i tablic

Krok 7 – Sprawdzanie obecności elementu w localStorage

Krok 8 – Iterowanie po elementach

Krok 9 – Sprawdzenie wsparcia przeglądarki

Podsumowanie

Pranay Kapgate

Komentarze