Pobranie tablicy z localStorage (JSON.parse()) | Pobieramy nasze zadania z localStorage

Żeby pobrać tablicę z localStorage również musimy zastosować dodatkową metodę uzupełniającą getItem(), ponieważ tablica jest zapisana w postaci ciągu tekstowego. W związku z tym, musimy "opakować" metodę getItem() w JSON.parse() - metodę, która przekształci naszą tablicę z ciągu tekstowego z powrotem w JavaScriptową tablicę:

let tasksFromLocalStorage = JSON.parse(localStorage.getItem("tasks"));

Powyższy kod również wygląda strasznie 😬, więc podobnie "rozbijemy" go na mniejsze polecenia i rozłożymy na czynniki pierwsze.

Zwróć uwagę na liczbę nawiasów: ponieważ localStorage.getItem("tasks") zostało przekazane do JSON.parse() jako argument, w związku z tym zostało "opakowane" w dodatkowe nawiasy.

Tutaj również moglibyśmy zastosować bardziej czytelne rozwiązanie:

// pobieramy tablicę zapisaną w localStorage w postaci ciągu tekstowego:
let tasksStringified = localStorage.getItem("tasks");

console.log("pobrana tablica w postaci ciągu tekstowego:", tasksStringified);

// przekształcamy ją z powrotem w JavaScriptową tablicę:
let tasksArray = JSON.parse(tasksStringified); // możemy też po prostu nazwać tasks

console.log("przekształcona z powrotem tablica:", tasksArray);

Powyższy kod jest nie tylko bardziej czytelny, ale też najprawdopodbniej bardziej zrozumiały dla Ciebie, gdyż rozbiliśmy złożoną czynność na 2 części: pobranie ciągu tekstowego i przypisanie go do zmiennej, a potem przekazanie tej zmiennej jako argumentu do JSON.parse(). No i nie mamy teraz tylu nawiasów (które nota bene mogą powodować dużą ilość błędów)!

Pobaw się tym kodem w konsoli i sprawdź, czym się różnią zmienne tasksStringified i tasksArray.

UWAGA! Po testowaniu i zabawie z kodem, usuń klucz "tasks" z localStorage za pomocą localStorage.remove("tasks"), żebyśmy mogli zacząć implementację kodu od podstaw.