JavaScript: Magazyn sieciowy local storage i session storage

Magazyn sieciowy

HTML 5 udostępnia programiście API do zapisywania i przechowywania danych o nazwie magazyn sieciowy. Mamy dwa rodzaje magazynów: magazyn lokalny: local storage oraz magazyn sesji: session storage.

Oba mechanizmy korzystają z tego samego interfejsu. Oznacza to, że wszystkie metody dostępne w magazynie lokalnym będą dostępne, w magazynie sesji.

Można zapytać, po co powstały i to jeszcze dwa dodatkowe funkcjonalności skoro istnieje coś takiego jak: cookies? To, co różni ciastka od local/session storage to, że dane w tym drugim są przechowywane wyłącznie po stronie klienta (po stronie przeglądarki). Nie można się do nich dostać po stronie serwera tak jak w przypadku ciastek. Ciastka mają także pewne ograniczenia co do ilości przechowywanych, w nich danych. Wprawdzie takie ograniczenie istnieje także po stronie magazynu sieciowego, ale tam możemy umieścić znacznie więcej danych.

Istnieje pewna różnica między magazynem lokalnym a sesji, ale o tym w dalszej części wpisu. Skupmy się teraz na wspólnym interfejsie.

API magazynu sieciowego

Zapis i odczyt działa na zasadzie: klucz --> wartość.

Do magazynu lokalnego odwołujemy się za pomocą obiektu: localStorage. Do magazynu sesji mamy dostęp poprzez obiekt: sessionStorage.

Z tego powodu, że interejs dla obu magazynów jest taki sam, w przykłądach przyjąłem jedną nazwę dla magazynu storage. Wystarczy, że ją podmienisz na localStorage lub sessionStorage, a będzie działać.

Do pracy z danymi przyda nam się takie API:

Zapis danych

Jeśli chcesz zapisać lub nadpisać dane możesz skorzystać z metody: setItem:

storage.setItem('someData', 'My data');

Pierwszy parametr to unikalny klucz, którym będziemy się posługiwać. Jeśli już taki klucz istnieje i go użyjesz do zapisu, to po prostu nadpiszesz poprzednie dane. Drugi argument to dane, które chcemy zapisać.

Istnieje inny sposób na zapis:

storage['someData'] = 'My data';
storage.extraData = '123';

Odczyt danych

Do pobrania zapisanych danych możemy użyć: getItem:

const data = storage.getItem('someData');

lub:

const data = storage['someData'];
const extraData  = storage.extraData;

Usuwanie danych

Jeśli chcemy skasować dane pod konkrentym kluczem korzystam z funkcji: removeItem:

storage.removeItem('someData');

Kasowanie wszystkich danych

Jeśli chcesz skasować wszystko, co zawiera magazyn sieciowy, użyj funkcji: clear:

storage.clear();

Metoda key

Obiekt magazynu sieciowego zawiera właściwość length. Zwraca ona ilość przechowywanych elementów, w magazynie:

storage.length;

Z kolei key przyjmuje jeden parametr: indeks danego elementu. W rezultacie zwraca nazwę klucza. Przykład:

for (let i = 0; i < storage.length; i++) {
  const key = storage.key(i);
  const value = storage[key];
	
  console.log(key, value);
}

Tylko uwaga: nie będziesz mieć gwarancji, że kolejność jest zachowana, w jaki sposób je dodałeś do magazynu-implementacja zależy od przeglądarki.

Jak zapisać/odczytać obiekt?

Do magazynu sieciowego można zapisać tylko łańcuch znaków. Bardziej złożone typy danych musimy przekonwertować do stringa i wtedy możemy dane zapisać:

Zapis obiektu

const myObject = {
  title: 'Some object',
	amount: 7,
	tags: ['tag 1', 'tag 2', 'tag 3']
}
const objectToSave = JSON.stringify(myObject);
storage.setItem('myObject', objectToSave);

Odczyt obiektu

Po wczytaniu zapisanego obiektu musimy dokonać konwersji ciągu znaków w obiekt:

const myObject = JSON.parse(storage.getItem('myObject'));

console.log(myObject.title);

Różnice między local a session storage

Magazyn dzieli się na dwa rodzaje: magazyn lokalny (local storage) oraz magazyn sesji (session storage). Oba mają ten sam interfejs. Ale są różnice między nimi:

Magazyn lokalny

Przede wszystkim dane przechowywane, w tym magazynie są trwałe — w takim sensie, że gdy użytkownik zamknie stronę, a następnie do niej wróci, to dane dalej tam będą. Dane, w takim magazynie przechowywane są, w obrębie domeny. Uwaga: znaczenie ma także protokół! Jeśli zapiszesz dane pod protokłem: http i będziesz próbować wczytać dane pod https mimo takiej samej domeny nie będziesz mieć do nich dostępu.

Dostęp do magazynu lokalnego mamy poprzez globalny obiekt o nazwie: localStorage.

Magazyn sesji

Dane zapisane, w magazynie sesji są trwałe do momentu jej zamknięcia, to jest do zamknięcia zakładki przeglądarki.

Dostęp do magazynu sieci mamy poprzez globalny obiekt: sessionStorage.