Storage

Nowe przeglądarki udostępniają nam interfejs Storage, który służy do przetrzymywania danych. Jest to taki swoisty schowek, w którym możemy przetrzymywać różne dane naszej strony.

Do czego to się może przydać? Możesz dla przykładu zapisywać tutaj wynik w grze na twojej stronie. Możesz zapisać treść danego artykułu, dzięki czemu po ponownym wczytaniu storny użytkonik nie będzie musiał go jeszcze raz wczytywać. Możesz zapisywać dynamicznie to co użytkownik wpisuje w textarea. Nagle wyłączy mu się karta/przeglądarka? Nic straconego - po ponownym wejściu na twój formularz ty mu wczytasz treść ze schowka, za co użytkownik będzie całował cię po rączkach. Zastosować takiego schowka są setki.

Teoretycznie podobnym mechanizmem są ciasteczka. W praktyce nie do końca. Jasne - także możemy w nich zachować jakieś dane. Ciasteczka są jednak ciut tródniejsze w obsłudze, mają mniej miejsca (Storage vs Cookies), a i w zasadzie istnieją do czegoś innego. To raczej mikro dane zapisane w przeglądarce, do których ma dostęp serwer (np. kod autoryzacji na stronie). Do Storage serwer dostępu nie ma - ma do niego dostęp tylko nasza przeglądarka.

Praca z Storage będzie przyjemniejsza, jeżeli w debugerze będziesz mógł widzieć jego dane. W debugerze chrome (F12) znajdziesz te dane w zakładce Application->LocalStorage. W Firefoxie musisz wpierw kliknąć ikonkę koła zębatego (ustawienia narzędzi) i włączyć "Dane". Pojawi się nowa zakładka w której znajdziesz Local Storage.

local storage w debugerze

Session storage

Storage składa się z session storage oraz local storage. Ten pierwszy służy do obsługi danych tylko w czasie trwania sesji (czyli do zamknięcia przeglądarki). Ten drugi służy do zapisywania danych na nieokreślony czas (aż do ich usunięcia). Obu używa się identycznie, więc w omawianych przykładach skupmy się tylko na localStorage.

Aby utworzyć i odczytać element w localStorage:


localStorage.setItem('myElement', 'Przykładowa wartość');

console.log(localStorage.getItem('myElement')); //Przykładowa wartość

Aby usunąć element:


localStorage.removeItem('myElement');
console.log(localStorage.getItem('myElement')); //null

Przetrzymywanie danych

Domyślnie localStorage umożliwia przetrzymywanie danych jako tekst. Aby móc przetrzymywać w nim obiekty, musimy je zamienić na tekst za pomocą JSON.stringify oraz JSON.parse:


const ob = {
    'one': 1,
    'two': 2,
    'three': 3
};

localStorage.setItem('myElement', JSON.stringify(ob));

const retrievedObject = localStorage.getItem('myElement');
console.log(JSON.parse(retrievedObject));

Jeżeli chcesz wspierać naprawdę stare przeglądarki, powinieneś sprawdzić, czy w ogóle localStorage istnieje. Wykorzystamy do tego celu kod:


if (typeof(Storage) !== "undefined") {
    if (localStorage.getItem('myElement') != null) {
        alert('Zapisany element to: ' + localStorage.getItem('myElement'));
    }
}

Jeżeli chcesz wyczyścić cały localStorage dla danej witryny, skorzystaj z metody .clear():


if (confirm('Czy chcesz wyczyścić zapisane dane?')) {
    localStorage.clear()
}