inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

▶ 함수, 변수의 호이스팅

스토리지 데이터에 하나만 안지워 지네요

해결된 질문

320

지우혁

작성한 질문수 10

0

스토리지 데이터에 다른건 다 삭제 되는데 하나 남았을때 삭제가 안되네요 전체 삭제하든 더블클릭으로 삭제하든 삭제가 안되네요 추가적으로 전체삭제를 해도 데이터가 안지워 지네요 ㅠㅠ

코드입니다.

const todoInput = document.querySelector("#todo-input");
const todoList = document.querySelector("#todo-list");

//로컬스토리지에서 데이터 빼오기
const savedTodoList = JSON.parse(localStorage.getItem("saved-items"));

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();
};

const keyCodeCheck = function () {
  //할일 추가 실행 함수
  if (window.event.keyCode === 13 && todoInput.value !== "") {
    createTodo();
  }
};

const deleteAll = function () {
  //전체 삭제 함수
  const liList = document.querySelectorAll("li");
  for (let i = 0; i < liList.length; i++) {
    liList[i].remove();
  }
  saveItemsFn();
};

const saveItemsFn = function () {
  //할일 저장 함수(네트워크 스토리지에)
  const saveItems = [];
  for (let i = 0; i < todoList.children.length; i++) {
    const todoObj = {
      contents: todoList.children[i].querySelector("span").textContent,
      complete: todoList.children[i].classList.contains("complete"),
    };
    saveItems.push(todoObj);
  }

  saveItems.length === 0
    ? localStorage.removeItem("saved-Items")
    : localStorage.setItem("saved-items", JSON.stringify(saveItems));
};

if (savedTodoList) {
  for (let i = 0; i < savedTodoList.length; i++) {
    createTodo(savedTodoList[i]);
  }
}

react node.js seo graphql next.js

답변 1

0

노원두

안녕하세요! 우혁님!

해당 JS 코드를 복사하여 실행해 보니, 정상적으로 동작하는 것 같아요!

개별 삭제더블클릭으로 잘 되고, 전체삭제 버튼도 역시 클릭하면 잘 되는 것 같아요!

 

혹시 문제가 있다면, HTML에서 오류가 있는 것은 아닌지 확인해 보는게 좋을 것 같아요!

fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다

0

41

1

댓글 기능 구현 중 질문드립니다.

0

67

1

쿠폰코드 발급

0

147

2

example 서버 플레이그라운드, API 접속 모두 안됩니다.

0

89

2

문의드립니다!! ㅠㅠ

0

106

2

graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.

0

80

2

_app.js 작성 이후로 에러가 발생하네요

0

96

2

학습자료

0

72

2

학습자료가 안열립니다.

0

51

2

플레이 그라운드 퀴즈 문제 질문이 있습니다.

0

61

0

기존강의 구매자, 업데이트 끝인가요?

0

111

3

업데이트 버전 수강

0

89

2

완벽한 프론트엔드

0

136

2

나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.

0

84

1

graphql 접속이 안됩니다.

0

101

2

const, let 사용 질문 드립니다.

0

72

2

싸이월드 만들기 1탄 피드백 부탁드립니다.

0

123

2

회원가입 과제 피드백 부탁드립니다.

0

81

2

styled.span / styled.input "CSS 자동완성"

0

47

1

쿠폰 발급 관련

0

167

2

서버 502 error

0

247

2

쿠폰 다시 부탁드려도 될가여?

0

140

2

a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요

0

185

2

2분 44초 질문

0

132

3