Local storage vs. Session storage. Czym są i jak ich używać?

Potrzebujesz szybkiego i łatwego sposobu na zarządzanie danymi na swojej stronie lub aplikacji? Użycie magazynu Web Storage może dać Ci trochę więcej swobody przy tworzeniu aplikacji. Jeśli jeszcze nie znasz tego mechanizmu lub chcesz go sobie odświeżyć to ten wpis jest właśnie dla Ciebie.

Czego się dzisiaj dowiesz?

Napiszę nieco o magazynie Web Storage i jego atrybutach czyli localStorage i sessionStorage. Wytłumaczę o co w tym wszystkich chodzi, jaka jest różnica między nimi oraz pokażę jak tego wszystkiego używać w projektach. Zaczynamy!

Czym jest Web Storage?

Jest to standard wprowadzony wraz z nadejściem HTML5. Jego zadaniem było danie Developerom kolejnej możliwości na zarządzanie danymi w aplikacjach internetowych. W jaki sposób?

Większość danych jest zazwyczaj trzymana na serwerze. Aby aplikacja mogła mieć do nich dostęp musi połączyć się z serwerem i przetransferować dane przez protokół HTTP. Dzisiaj w czasach szybkiego internetu taki proces jest już to normą jednak do niedawna ilość transferu miała spore znaczenie i wpływała na wydajność.

Jedną z prób ograniczenia ilości danych wysyłanych przez HTTP było właśnie wprowadzenie standardu Web Storage. O co chodzi?

Web Storage

Jest on tzw. magazynem czyli miejscem gdzie składowane są dane. A gdzie jest ten magazyn? W naszej przeglądarce! Inaczej naszym UA czyli user agent. A bardziej dokładnie to przeglądarka alokuje miejsce na naszym dysku gdzie może trzymać te dane.

W praktyce developer określa kiedy i co ma być wysłane do magazynu i analogicznie kiedy i co należy z niego pobrać.

Rozmiar Web Storage

Jeśli aplikacje mogłyby w nieskończoność zapychać dyski komputerów m.in. przez Web Storage to producenci dysków byli by bardzo szczęśliwi. Oczywiście ze względu na to zostały wprowadzone limity w przeglądarkach.

Standard rekomenduje 5MB na każdy unikalne pochodzenie (origin czyt. adres www) jednak ten limit może być zwiększony w przeglądarce przez użytkownika.

Web Storage vs cookie

Te dwa zasadniczo różne mechanizmy są często porównywane. Konkretniej localStorage i cookies. Dlaczego? Może dlatego, że pierwotnym założeniem cookies było przenoszenie danych. Mniejsza o to…

Cookies są bardzo małe (do 4KB) i są wysyłane z/do serwera za pomocą HTTP podczas gdy localStorage jest stosunkowo duży (5MB +) i nie wysyła nic na serwer.

Jeśli ktoś chce dowiedzieć się więcej na temat cookies można to zrobić w jednym z moich wpisów

Interfejs Web Storage

Web Storage składa się z obiektu Storage który może przechowywać ciągi par key/value czy inaczej właściwość/wartość czyli klasycznie. Nasz Storage ma wbudowane metody. Te metody są zdefiniowane w interfejsie. Wygląda to tak:

[Exposed=Window]

interface Storage {
    readonly attribute unsigned long length;
    DOMString? key(unsigned long index);
    getter DOMString? getItem(DOMString key);
    setter void setItem(DOMString key, DOMString value);
    deleter void removeItem(DOMString key);
    void clear();
};

Czyli mamy to dyspozycji .length , .key( ), .getItem( ), .setItem( ), .removeItem( ), .clear( ). Nie trudno się domyślić o co w tym wszystkich chodzi jednak więcej szczegółów za chwile.

Obsługa Web Storage

Większość współczesnych przeglądarek oczywiście wspiera Web Storage no ale gdyby ktoś chciał sprawdzić czy to w ogóle zadziała można to zrobić np. tak:

function supports_storage() {
    try {
        console.log('localStorage' in window && window['localStorage'] !== null); // true
    } catch (e) {
        console.log(false); // false
    }
}

supports_storage();

localStorage i sessionStorage

Skoro mamy już zrozumienie czym jest Web Storage jako taki możemy i pójść dalej tzn. rozróżnić jego dwa atrybuty.

W mechanizmie działania się zasadniczo nie różnią. W zasadzie chodzi tylko o czas przechowywania danych.

localStorage przechowuje dane permanentnie tzn. raz zapisane dane już tam są i aplikacja może w każdym momencie się do nich odwołać. Nie zależnie od sesji. Czy jest ona zainicjowana dzisiaj czy jutro itp. No chyba, że użytkownik ręcznie usunie zawartość localStorage…

Nie ma też wbudowanego mechanizmu jak długo dane mogą być przechowywane w localStorage tak jak np. w wypadku cookies. Developer może po prostu kontrolować takie rzeczy dodawając do rekordów dodatkową właściwość np. z datą utworzenia.

sessionStorage jak sama nazwa wskazuje działa tylko podczas trwania sesji. Po zakończeniu sesji magazyn jest usuwany. No to czym jest sesja się pytasz?

To jest aktualny kontekst przeglądania najwyższego poziomu ( current top-level browsing context ). Po ludzku to aktualnie otwarte okno przeglądarki. Przeglądarka wykonuje szereg czynności aby ustalić aktualny kontekst przeglądania. Jeśli warunki są spełnione wtedy umożliwia używanie sessionStorage np. w obrębie jednego okna i podstron pochodzących z tego samego URL. Kwestia kontekstu jest generalnie dość ciekawa i opisano ją w specyfikacji HTML .

Niemniej jeśli chcesz użyć sessionStorage i on nie działa to najprawdopodobniej robisz to w złym momencie.

Po co używać localStorage?

Sprawa może być przydatna np. przy określaniu czy użytkownik jest zalogowany przy ponownym otwarciu przeglądarki, wczytywanie stanów jakiś gierek w przeglądarce itp. Oczywiście można użyć do tego HTTP i to jest chyba lepsze rozwiązanie no ale…

Można też tego użyć przy przenoszeniu danych między podstronami/komponentami wewnątrz aplikacji jednak współcześnie skutecznie rozwiązuje ten problem np. Redux.

Użycie localStorage

Teraz czas na kod. Poniżej dwie funkcje, w pierwszej wywołuje większość metod a w drugiej tylko pobieram obiekt z localStorage. Wygląda to tak:

function playWithStorage(val1, val2) {
    //czyszczę wszystko co jest w magazynie
    localStorage.clear();
    
    // sprawdzam stan początkowy
    console.log(localStorage.length) // 0 - nie ma nic
    
    // dodaje właściwość property
    localStorage.setItem('property', val1);
    
    // dodaje właściwość animal
    localStorage.setItem('animal', val2);
    console.log(localStorage.length) // 2 - 2 elementy
    
    // sprawdzam czy instnieje 1-szy element
    console.log(localStorage.key(0)); //animal
    
    // usuwam właściwość property
    localStorage.removeItem('property');
    // sprawdzam stan
    console.log(localStorage.length) // 1 - tylko animal

}

playWithStorage('dom', 'pies');

// Teraz pobiorę element w kolejnej funkcji

function getValFromStorage(){
    
    let animal =localStorage.getItem('animal');
    console.log(animal); // pies
}

getValFromStorage();

Użycie sessionStorage

Wygląda to w zasadzie tak samo poza tym, że odnosimy się do session nie do local. Należy tylko pamiętać kiedy użycie sessionStorage ma jakikolwiek sens. Kod wygląda tak:

//supports_storage();
function playWithStorage(val1, val2) {
    
    //czyszczę wszystko co jest w magazynie
    sessionStorage.clear();
    
    // sprawdzam stan początkowy
    console.log(sessionStorage.length) // 0 - nie ma nic
    
    // dodaje właściwość property
    sessionStorage.setItem('property', val1);
    
    // dodaje właściwość animal
    sessionStorage.setItem('animal', val2);
    console.log(sessionStorage.length) // 2 - 2 elementy
    
    // sprawdzam czy instnieje 1-szy element
    console.log(sessionStorage.key(0)); //animal
    
    // usuwam właściwość property
    sessionStorage.removeItem('property');
    // sprawdzam stan
    console.log(sessionStorage.length) // 1 - tylko animal
}

playWithStorage('dom', 'pies');

// Teraz pobiorę element w kolejnej funkcji

function getValFromStorage(){
    
    let animal =sessionStorage.getItem('animal');
    console.log(animal); // pies

}

getValFromStorage();

Co więcej?

Jeśli chcesz dowiedzieć więcej na temat poruszanych dzisiaj zagadnień po prostu czytaj dokumentację. Jest naprawdę fajnie napisana 🙂

Podsumowanie

Mechanizm Web Storage jest naprawdę ciekawym narzędziem i napewno warto a nawet trzeba go znać i rozumieć. Przynajmniej będąc Developerem 🙂

Jeśli dzisiejszy wpis ma jakieś błędy logiczne lub merytoryczne to bardzo bym prosił o napisanie tego w komentarzu. Dzięki!

Print Friendly, PDF & Email

Bartek Cis

Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?