20191107. to-do list 웹사이트 js 부분 + to-do list 스토리지저장하기

const toDos = [];

// toDos 를 배열로 만들어준다, 스토리지에 여러 todolist를 저장하기위해서 배열로 바꾸어줘야한다.

function saveToDos() {

localStorage.setItem(TODOS_LS, JSON.stringify(toDos));

}

/* saveToDos함수를 만들고 toDos변수는 이제 객체가 되었기때문에 스토리지에서 저장할때 string이 아니기때문에 제대로 저장할수가 없다. 그렇기때문에 JSON.stringify를 이용하여 저장하게 한다. */

 

function paintToDo(text) {

const li = document.createElement("li");

const delBtn = document.createElement("button");

delBtn.innerText = "❌";

const span = document.createElement("span");

const newId = toDos.length + 1; // li태그에도 id를 넣어주기 위해 newId 변수를 생성한다.

delBtn.innerText = "❌";

span.innerText = text;

li.appendChild(delBtn);

li.appendChild(span);

li.id = newId; // li.id 에 newId 변수 입력 ex) 1,2,3,4, 식으로 저장된다.

toDoList.appendChild(li);

const toDoObj = {

text: text,

id: newId

};

toDos.push(toDoObj);

saveToDos();

} /* toDoObj라는 객체를 만들어준다. 이는 toDos라는 배열에 객체로 (text, id 값)을 넣어주기 위함이다. toDos.push(toDoObj); -구문은 toDos배열에 객체(toDoObj)를 넣어주는 구문이다. */

 

function loadToDos() {

const toDos = localStorage.getItem(TODOS_LS);

if (toDos !== null) {   // 삭제되는 부분

const loadedToDos = localStorage.getItem(TODOS_LS);

if (loadedToDos !== null) {

const parsedToDos = JSON.parse(loadedToDos);

parsedToDos.forEach(function(toDo) {

paintToDo(toDo.text);

});

}

} /* toDos를 loadToDos로 변경하고, 로컬스토리지에 TODOS_LS(toDos)(=key값)을 저장한다. TODOS_LS의 value가 null이 아닐경우 (처음엔 null이다. ), const parsedToDos = JSON.parse(loadedToDos); 이구문은 loadedToDos값을 json객체로 바꾸어서 parsedToDos변수에 저장하는 것이다.