Modyfikujemy pozostałe funkcje, aby aktualizowały localStorage

Aby dokończyć wersję 2.0 aplikacji, pozostało nam tylko dodać funkcję updateTasksInLocalStorage() do pozostałych funkcji (po prostu kopiuj i wklejaj updateTasksInLocalStorage(); we właściwych miejscach w funkcjach, czyli po modyfikacji zmiennej tasks):

// todo-app-local-storage app code:

// ...tutaj jest poprzedni kod w pliku

function addTaskAtIndex(index, newTask) {
  tasks.splice(index, 0, newTask);

	console.log("Do Twoich zadań zostało dodane nowe zadanie:", newTask);

	updateTasksInLocalStorage(); // <= dodajemy updateTasksInLocalStorage()

	showTasks();
}

function deleteTask(index) {
  tasks.splice(index, 1);

	updateTasksInLocalStorage(); // <= dodajemy updateTasksInLocalStorage()

	showTasks();
}

function deleteAllTasks() {
  tasks = [];
	
	console.log("Wszystkie zadania zostały usunięte...");

	updateTasksInLocalStorage(tasks); // <= dodajemy updateTasksInLocalStorage()
	
	showTasks();
}

// odpalając program, wyświetlamy zapisane zadania na start:
showTasks();

Jeszcze raz (na wszelki wypadek) wytłumaczę, dlaczego dodaliśmy funkcję updateTasksInLocalStorage() i dlaczego dodaliśmy ją w określonym miejscu w naszym kodzie.

Wspomniana funkcja ma dostęp do globalnej zmiennej tasks. Zmienna ta nazywa się globalną, ponieważ została zadeklarowana poza żadną funkcją, w związku z czym nic nie ogranicza jej zasięgu - mamy do niej dostęp w dowolnej linijce kodu poniżej jej deklaracji. updateTasksInLocalStorage() nie robi nic innego, jak przypisuje do klucza "tasks", znajdującego się w localStorage, aktualną wartość zmiennej tasks, czyli jej rzeczywistą wartość w chwili zapisu.

Jeśli np. dodaliśmy coś do tablicy tasks, a potem wywołamy updateTasksInLocalStorage(), to będzie miała ona dostęp do zmienionej przed sekundą tablicy zadań. Dlatego tak ważne jest, by wywołać updateTasksInLocalStorage() dopiero po aktualizacji zadań, a nie np. przed, ponieważ w tym przypadku zapisalibyśmy wartość tasks przed zmianą jej wartości.

Zobaczmy przykład ✅ poprawnej aktualizacji localStorage:

// przykładowa lista zadań:

let tasks = ["a", "b", "c"];
console.log(tasks); // => ["a", "b", "c"]

// 1. najpierw dodajemy zadanie do zmiennej:
tasks.push("d");
console.log(tasks); // => ["a", "b", "c", "d"]

// 2. dopiero teraz aktualizujemy localStorage,
// czyli wrzucamy do niego taski z nowododanym "d":

updateTasksInLocalStorage(); // zapisaliśmy ["a", "b", "c", "d"] do localStorage

W tym przykładzie zachowaliśmy spójny stan aplikacji: zmienna task jest "zsynchronizowana" z wartością "tasks" w localStorage.

Poniżej z kolei jest przykład ❌ niepoprawnej aktualizacji localStorage:

// przykładowa lista zadań:

let tasks = ["a", "b", "c"];
console.log(tasks); // => ["a", "b", "c"]

// 1. najpierw aktualizujemy localStorage:
updateTasksInLocalStorage(); // w localStorage zapisujemy aktualną wartość tasków => ["a", "b", "c"]

// 2. dodajemy zadanie do zmiennej:
tasks.push("d");
console.log(tasks); // => ["a", "b", "c", "d"]

Jak widzisz, "rozjechał" nam się stan aplikacji: localStorage przechowuje wartość tasks sprzed dodania nowego zadania do listy, w związku z czym localStorage i tasks nie są zsynchronizowane.

Pamiętaj zatem, żeby pilnować:

• kolejności poleceń w JavaScript - kod jest wykonywany od góry do dołu;
• pilnuj stanu aplikacji, jeśli zmienne/ lokalizacje wymieniają się danymi.