해결된 질문
23.03.15 00:10 작성
·
257
0
const createTodo = function (storageData) {
let todoContents = todoInput.value;
if (storageData) {
todoContents = storageData.contents;
}
const newLi = document.createElement("li");
const newSpan = document.createElement("span");
const newBtn = document.createElement("button");
newBtn.addEventListener("click", () => {
newLi.classList.toggle("complete");
saveItemsFn();
});
newLi.addEventListener("dblclick", () => {
newLi.remove();
saveItemsFn();
});
if (storageData?.complete) {
newLi.classList.add("complete");
}
newSpan.textContent = todoContents;
newLi.appendChild(newBtn);
newLi.appendChild(newSpan);
todoList.appendChild(newLi);
todoInput.value = "";
saveItemsFn();
};
잘 이해가 되지않는 부분이 있어 질문남깁니다!
newSpan.textContent = todoContents;
이곳에서 todoContents대신 todoInput.value로 할당했을 때 localstorage의 content에 값이 정상적으로 전달되지않고 ""로 빈 값이 저장되는 지 궁금합니다.
답변 1
1
안녕하세요 weekend12님!
질문해 주신 내용을 확인해 보면
newSpan.textContent = todoContents;
위 코드의 todoContents
를 todoInput.value
로 변경하였을 때, 왜 localStorage에 빈 문자열("")이 저장되는 것인지에 관한 질문으로 파악되네요!
먼저 createTodo
함수는 li
태그로 표현되는 할 일 목록을 하나씩 생성하기 위해 활용되는 함수입니다.
각 할 일을 담고 있는 li
태그를 생성하고 마지막에는 localStorage
에 새롭게 추가된 데이터를 더해 목록을 저장하게 되죠.
createTodo 함수가 호출되는 경우, 즉 할 일 목록이 하나씩 생성되는 때는 총 두가지 입니다.
input box에 할 일을 입력하고 Enter 키를 누르는 경우
페이지가 렌더링 될 때, localStorage에 할 일 목록이 저장되어 있는 경우
먼저 첫번째 경우는 todoInput의 value
가 존재합니다. 우리가 직접 할 일을 입력하고 Enter
키를 눌렀기 때문이죠.
두번째 경우는 페이지가 렌더링 될 때 실행되는 경우입니다. 즉, 우리가 어떠한 동작을 취하기도 이전에 페이지가 불러와지며 바로 실행되는 것이죠. 이때는 input box
가 당연히 비어 있겠죠?
때문에 우리는 localStorage
에 저장된 데이터들을 storageData
라는 이름의 매개변수로 받아와서 저장된 내용을 토대로 li
태그를 하나씩 생성했습니다.
이후 과정에서 우리는 localStorage
에 값을 저장할 때, 현재 존재하는 li
태그들을 참조해서 값을 저장했습니다.
그런데 우리가 todoContents
를 사용하지 않고 todoInput의 value
를 사용한다면, 2번 경우에 해당하여 createTodo
함수가 호출 됐을 때, 빈 값을 사용해서 li
태그가 생성 되었을테니, localStorage
에도 빈 문자열이 저장되어 버리는 것이죠.
2023. 03. 15. 14:59
이해되었습니다 감사합니다 ㅠㅠ