Storage

W przeszłości do przechowywania danych wykorzystywaliśmy ciasteczka. Jak poznałeś w tamtym artykule, obsługa ich nie jest najprzyjemniejsza na świecie, a poza tym mają spore ograniczenia w wielkości przetrzymywanych danych (do 4KB).
Nowe przeglądarki udostępniają nam interfejs Storage, który służy do podobnego celu, ale nie tylko umożliwia przetrzymywanie większej ilości danych (do 5MB), ale użycie jego jest banalnie proste.
Pamiętaj jednak, że w przeciwieństwie do Ciasteczek, do danych ze Storage ma dostęp tylko 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 Resources->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.

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:


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

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

var 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:


function localStorageExist() {
    var itemName = 'testLocalStorage';
    try {
        localStorage.setItem(itemName, 'test');
        localStorage.removeItem(itemName);
        return true;
    } catch(e) {
        return false;
    }
}

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