How to save data (e.g. game score or notes) locally to local storage?

Czasem zachodzi potrzeba zapisania danych użytkownika, tak by mógł do nich wrócić i ponownie z nich skorzystać. Niekoniecznie trzeba te dane od razu wysyłać na serwer, wystarczy, że zostaną zapisane lokalnie, w przeglądarce użytkownika. Sama wykorzystałam taki „trick”, kiedy robiłam grę na konkurs – Gynvael’s Summer GameDev Challenge 2018 oraz w mojej prostej liście TO DO.

Czym jest local storage? Jest to miejsce w przeglądarce użytkownika, w którym można przechowywać różnego rodzaju dane – w uproszczeniu: schowek na dane. Ma do nich dostęp tylko przeglądarka, dane nie muszą być więc pobierane lub wysyłane na serwer, jak to ma miejsce w przypadku cookies. Dzięki temu można korzystać z nich również nie mając dostępu do internetu. Ponadto dane takie (w przeciwieństwie do cookies) nie mają ustalonego terminu ważności, po którym wygasają. Mogą więc być wykorzystywane tak długo, dopóki użytkownik nie usunie ich ręcznie. Można odwołać się do nich np. za pomocą JavaScriptu, a odwołanie takie jest możliwe tylko z domeny, z której dane pochodzą. Istnieje jeszcze rodzaj danych, które zapisywane są tylko na czas trwania danej sesji (session storage), ale o nich napiszę innym razem.

Więc jak zapisać dane w local storage? Posłużę się przykładem zaczerpniętym ze wspomnianej wcześniej listy TO DO (kod tutaj).

Aby zapisać dane, wystarczy wpisać:

localStorage.setItem('nazwaElementu', 'wartoscElementu');

Do odczytania danych można użyć zapisu:

const myElement = localStorage.getItem('nazwaElementu')  // zwrócona zostanie wartość elementu: 'wartoscElementu'

W moim przykładzie najpierw sprawdzam, czy w storage są już zapisane jakieś dane z mojej witryny. Jeśli nie, to tworzę dwa nowe elementy o nazwach „date” i „task” oraz przypisuję im przykładowe wartości, a następnie wyświetlam je na stronie. Jeśli tak, odczytuję dane ze storage i wyświetlam je na stronie za pomocą funkcji add_task:

function init_storage() {
    let get_storage_date = localStorage.getItem("date");
    let get_storage_task = localStorage.getItem("task");

    if (get_storage_task === null) {
       localStorage.setItem("date", "");
       localStorage.setItem("task", "Przykładowe zadanie");
       add_task("Przykładowe zadanie");
    }
    else {
       get_storage_date = localStorage.getItem("date").split(",");
       get_storage_task = localStorage.getItem("task").split(",");
       for (i=0; i < get_storage_date.length; i++) {
          add_task(get_storage_task[i], get_storage_date[i]);
       }
    }
}

Dane w local storage przechowywane są w postaci stringu. Oznacza to, że jeśli jeden element zawiera kilka wartości, to zapisywane są one jako jeden string, po przecinku. Aby odczytać każdą wartość osobno, zamieniam string na tablicę łańcuchów stringów za pomocą polecenia split(„,”) – polecenie to dzieli string na części, w tym przypadku oddziela każdą część, po której następuje przecinek.

Czas na zapisanie danych w storage. Funkcja save_task pobiera wszystkie nagłówki z datą oraz treść zadań, dodaje każde z nich do odpowiedniej tablicy i całą tablicę zapisuje w storage:

function save_task() {
   const get_task_header = document.getElementsByClassName("header-text")
   const get_task_text = document.getElementsByClassName("task-text")
   let task_header_arr = [];
   let task_text_arr = [];
		
   for (i=0; i < get_task_header.length; i++) {
      task_header_arr.push(get_task_header[i].innerText);
      task_text_arr.push(get_task_text[i].innerText);
   }
   localStorage.setItem("date", task_header_arr);
   localStorage.setItem("task", task_text_arr);
}

Teraz przy każdej zmianie dokonanej na stronie (przy zapisie nowego zadania lub jego skasowaniu albo edycji) aktualne dane zapisywane są w schowku przeglądarki, dzięki czemu można z łatwością z nich skorzystać 🙂