javascript to do 리스트 응용 (2) localstorage 데이터 사용

todo.js

const TODOS_KEY = "todos"

const getToDos = localStorage.getItem(TODOS_KEY);

function sayHello(item) {
 console.log("this is the turn of", item);
}

if(getToDos !== null){
    const parsedToDos = JSON.parse(getToDos);
    parsedToDos.forEach(sayHello);
}

 

 

• javascript to do 리스트 응용 (1)에서 localstorage JSON.stringify 로 저장해서 localstorage.getItem 으로 불러오는 작업과 localstorage에 있는 데이터를 JSON.parse로 배열로 만들어주는 작업

 

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

JSON.parse() - JavaScript | MDN

 

 

 

• function sayHello 해당 함수를 간단하게 나타내는 방법도 가능

const TODOS_KEY = "todos"

const getToDos = localStorage.getItem(TODOS_KEY);

if(getToDos !== null){
    const parsedToDos = JSON.parse(getToDos);
    parsedToDos.forEach((item) => console.log("this is the turn of", item));
}

 

localStorage 를 불러와서 List 추가

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

let toDos = [];

const TODOS_KEY = "todos"

function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    button.innerText = "✂";
    button.addEventListener("click", deleteToDo)
    li.appendChild(span);
    li.appendChild(button);
    span.innerText = newTodo;
    toDoList.appendChild(li);

}

const getToDos = localStorage.getItem(TODOS_KEY);

if(getToDos !== null){
    const parsedToDos = JSON.parse(getToDos);
    toDos = parsedToDos;
    parsedToDos.forEach(paintToDo);
}

• 처음에 LocalStorage를 불러와 paintToDo forEach 문으로 통해 리스트를 추가 시켜준다

 

 

※ forEach 문 : forEach() 메서드는 배열에 활용이 가능한 메서드로, 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드이다.

 

https://bigtop.tistory.com/58

[JavaScript] 자바스크립트 forEach 메서드 이해하기