Przeglądarki wspierają dwa rodzaje magazynów – lokalny i sesyjny, które pozwalając na wrzucanie tam dowolnych rzeczy wykorzystując pary klucz-wartość.
Lokalny magazyn (local storage)
Jest to magazyn, który jest czyszczony po zamknięciu wszystkich kart przeglądarki. I jest on tworzony dla każdej strony oddzielnie (dokładnie rzecz ujmując to dla konkretnego źródła – protokół + domena + port -> na przykład https://damianradowiecki.pl:443). Czyli mając otwarte to samo źródło w wielu zakładkach operujemy na tym samym magazynie lokalnym.
Jak z tego skorzystać?
Do lokalnego magazynu mamy dostęp poprzez zmienną globalną localStorage:
localStorage.setItem('someKey', 'some value');
localStorage.removeItem('someKeyToBeRemoved');
localStorage.getItem('someKey');Sesyjny magazyn (session storage)
Jest to magazyn, którego dane są przechowywane dopóki zakładka w przeglądarce nie została zamknięta (nie ma to nic związanego z sesją użytkownika utrzymywaną przez serwer). Jeśli zostanie ona zamknięta, automatycznie tracone są wszystkie dane. Podobnie jak w przypadku lokalnego magazynu, ten też jest tworzony jeden dla danego źródła.
Przykładowo po wejściu na źródło A i odświeżeniu strony dalej mamy dostęp do danych zapisanych w magazynie. Podobnie sytuacja wygląda gdy będąc w jednej zakładce zapiszemy coś w magazynie dla źródła A, następnie przejdziemy do źródła B, to gdy wrócimy do źródła A, dalej mamy dostęp do zapisanych wartości w źródle A.
Jak z tego skorzystać?
Korzystanie z magazynu sesyjnego wygląda identycznie jak w przypadku lokalnego, przy czym tutaj używamy zmiennej globalnej sessionStorage:
sessionStorage.setItem('someKey', 'some value');
sessionStorage.removeItem('someKeyToBeRemoved');
sessionStorage.getItem('someKey');