Angular - zajęcia 2

Materiały do warsztatów technologii webowych prowadzonych na Wydziale Matematyki i Informatyki Uniwersytetu im. Adama Mickiewicza w Poznaniu.

Wróć do spisu materiałów

1. WebStorage API HTML5

1.1. Magazyn lokalny przeglądarki

Mechanizm Web Storage pozwala na przechowywanie danych w przeglądarce internetowej. Istnieją dwa rodzaje tego mechanizmu: lokalny i sesji.

Dane są przechowywane w postaci właściwości obiektów pamięci masowej (par klucz-wartość). Wartość w parze jest zawsze ciągiem tekstowym. Aby chronić informacje przechowywane przez witryny we wspomnianych obiektach przeglądarki stosują politykę tego samego źródła. Oznacza to, że dostęp do danych mają jedynie strony znajdujące się w tej samej domenie.

Weźmy następującą stronę: http://www.google.pl:80:

http:// - protokół - WebStorage dostępne tylko w obrębie danego protokołu;
www - subdomena - też musi być dopasowana;
google.pl - domena;
:80 - port - jego numer najczęściej nie jest podawany w adresie URL, a witryna internetowa używa portu 80 dla stron (numer portu może się zmieniać).

Magazyn lokalny pozwala na przechowywanie informacji nawet po zamknięciu karty czy okna.

Dla obu rodzajów magazynów mamy te same metody i właściwości:

setItem(klucz, wartość) - utworzenie nowej pary klucz-wartość;
getItem(klucz) - pobranie wartości wskazanego klucza;
removeItem(klucz) - usunięcie pary klucz-wartość dla wskazanego klucza;
clear() - usunięcie wszystkich informacji z magazynu;
length - liczba kluczy.

Przykład 1.1.1.

1.2. Magazyn sesji przeglądarki

Dane przechowywane w tym magazynie są dostępne w danej sesji strony.

Przykład 1.2.1.

Źródła

Duckett Jon, JavaScript and JQuery: Interactive Front-End Web Development, przeł. Robert Górczyński, Helion, 2015, ISBN 978-83-283-0126-9.