Storage

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 strony użytkownik nie będzie musiał go jeszcze raz wczytywać. Zastosowań takiego schowka są setki.

Ważne tutaj jest to, że dostęp do takiego schowka ma tylko dana strona w danej przeglądarce danego użytkownika. Nikt więcej się do niego nie dobierze (poza hakerami rzecz jasna).

Teoretycznie podobnym mechanizmem są ciasteczka. W praktyce nie do końca. Także możemy za ich pomocą przetrzymywać jakieś dane, jednak są ciut trudniejsze w obsłudze (e tam), 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). Storage pozwala nam przechowywać łatwiej i więcej danych, natomiast dostęp do nich ma tylko nasza przeglądarka na danym komputerze.

Zapisywanie i pobieranie elementu

Interfejs 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 skupię się tylko na localStorage.

Aby utworzyć nowy element w localStorage możemy skorzystać z funkcji setItem(), lub dodać nową właściwość tak samo jak do każdego innego obiektu:

//zalecany sposób to użycie metody
localStorage.setItem("myElement", "Przykładowa wartość");

//możemy też jak przy zwykłych obiektach
localStorage.myElement = "Przykładowa wartość";
localStorage["myElement"] = "Przykładowa wartość"

Przy odczycie sytuacja jest bardzo podobna. Możemy użyć funkcji getItem() lub odwołać się tak samo jak przy innych obiektach:

const element = localStorage.getItem("myElement");

const element = localStorage.myElement;
const element = localStorage["myElement"];

Jeżeli danego elementu nie ma w storage, funkcja getItem() zwróci null.

//tworzymy element tylko wtedy gdy go jeszcze nie ma
if (localStorage.getItem("myElement") === null) {
    localStorage.setItem("myElement")
}

Usuwanie elementów

Aby usunąć element z localStorage, skorzystamy z funkcji localStorage.removeItem():

localStorage.removeItem("element");

Jeżeli danego elementu nie ma, metoda nie wykona żadnej operacji.

Jeżeli chcemy wyczyścić cały localStorage dla danej witryny, posłużymy się funkcją localStorage.clear():

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

Sprawdzenie czy możemy zapisywać

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

if (typeof localStorage !== "undefined") {

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

}

Nie jest to jednak poprawny test. LocalStorage może istnieć w danej przeglądarce, ale użytkownik może wyłączyć jego działanie. Dlatego bezpieczniejszy jest poniższy test:

function localStorageTest(){
    const test = "test" + new Date().valueOf();
    try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}

if (localStorageTest()) {
    localStorage.setItem("myElement", JSON.stringify(ob));
}

Zapisywanie i pobieranie złożonych danych

Domyślnie localStorage podobnie do dataset umożliwia przetrzymywanie danych jako tekst.

Aby móc przetrzymywać w nim obiekty (w tym tablice), musimy je zamienić na tekst za pomocą funkcji JSON.stringify() oraz pobierając odmienić JSON.parse:

const ob = {
    name : "Karol",
    surname : "Nowak",
    age: 20
};

localStorage.setItem("myData", JSON.stringify(ob));

const retrievedObject = JSON.parse(localStorage.getItem("myData"));
console.log(retrievedObject);

Pamiętaj, że kodując na format JSON, w danych nie mogą występować żadne funkcje.

Przykład użycia

Jak widzisz użycie storage nie może być prostsze. W ramach przećwiczenia zróbmy bardzo prosty przykład - formularz, który zapamięta to co wpisuje do niego użytkownik. Jeżeli karta czy przeglądarka się wyłączy, użytkownik będzie mógł wrócić by dokończyć wpisywanie swojego wypracowania.

W poniższym przykładzie zacznij coś wpisywać, ale zanim wyślesz wiadomość, odśwież tą stronę.

<form id="form" class="form">
    <label for="msg">Wpisz swoją wiadomość</label>
    <textarea name="msg" id="msg"></textarea>
    <button type="submit" class="button">Zapisz</button>
</form>

//pobieram elementy
const form = document.querySelector("#form");
const textarea = document.querySelector("#msg");

//jeżeli jest element w localStorage, ustawiam wartość dla textarea
if (localStorage.getItem("textareaValue") !== null) {
    textarea.value = localStorage.getItem("textareaValue");
}

//podczas wpisywania do textarea aktualizuję localStorage
textarea.addEventListener("input", e => {
    localStorage.setItem("textareaValue", textarea.value);
});

form.addEventListener("submit", e => {
    //gdy użytkownik wysyła formularz, zakładamy że już skończył pisać
    //więc nie ma po co trzymać treści w localStorage
    localStorage.removeItem("textareaValue");
});