Notice
Recent Posts
Recent Comments
Link
«   2025/07   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

dearbeany

[ToDoList] 추가, 삭제 기능 구현 및 로컬스토리지 이용 본문

Web

[ToDoList] 추가, 삭제 기능 구현 및 로컬스토리지 이용

dearbeany 2022. 8. 30. 14:44

태그 자체로 가져올 경우 등록 후 초기화 가능 (반면, value 자체로 가져오면 초기화 불가함)

아무 것도 입력하지 않고 등록을 누를 경우 alert창을 뜨게 한다.

-> .trim() 양 사이드 공백을 제거하는 메소드. 비어있으면 false문.

 

동적으로 추가한 것들은 새로고침 하면 데이터가 날라간다

=> 새로고침 = 해당 url로 다시 정보를 요청하는 동작.

 

toggle -> 하나의 클래스에 대해서만 가능하다.

 

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>TodoList</title>
  <style>
    .done {
      text-decoration: line-through;
    }

  </style>
</head>

<body>
  <h1>TodoList</h1>
  <input type="text" id="todo-value" placeholder="할일 입력">
  <button id="regist">등록</button>
  <hr>
  <h2>나의 할 일 목록</h2>
  <ul id="todo-list">

  </ul>

  <script>
    const registBtn = document.querySelector("#regist") //등록버튼
    const inputTag = document.querySelector("#todo-value")//입력 창
    const ulTag = document.querySelector("#todo-list")  //리스트
    function registTodo() {
      const content = inputTag.value;

      //값이 없다면 경고창
      if (!content.trim()) {
        alert("할일을 입력하세요~~")
      } else {
        //li 태그 생성 후 값 채우기
        const liTag = document.createElement("li")
        liTag.innerText = content

        //일 했다 안했다 수정
        liTag.addEventListener("click", function (event) {
          event.target.classList.toggle("done")
        })
        //삭제 이벤트 달기
        const delBtn = document.createElement("button")
        delBtn.innerText = "X"
        liTag.appendChild(delBtn)

        //삭제버튼에 이벤트를 달아보자.
        delBtn.addEventListener("click", function (event) {
          // event.target.parentElement.remove()
          liTag.remove();
        })



        ulTag.appendChild(liTag) //목록에 추가
        inputTag.value = ""   //입력 초기화
        inputTag.focus()
      }
    }


    //등록 버튼을 눌렀다면 이벤트를 걸자
    registBtn.addEventListener("click", registTodo);

  </script>
</body>

</html>

 

 

 

 

TodoList

TodoList


나의 할 일 목록

 

 

로컬스토리지 사용해서 데이터 저장하기

- key-value 형태로 저장. 둘 다 문자열 형태

- 값(value)의 경우 JSON.stringify() 를 사용

 

 

 

registTodo : 데이터를 등록하는 용도

createTodo : 할 일 목록 생성 및 추가

..

두 번째 실습은 역할을 나누어 세분화시킴.

 

event는 명시하지 않아도 알아서 넘어간다. (안 넘겨도 쓸 수 있음)

 

로컬스토리지에 직접 저장하기

todoList는 배열이다. 이러한 배열에 저장되는 todoItem은 Object이다. 이 객체는 todo(실제 할 일)와 done(boolean)의 값을 가진다.

로컬스토리지에 저장하기 위해서 todoItem을 만들었다. 새롭게 등록됐기에 done은 false 상태이다.

이를 todoList에 추가하도록한다.

todoList.push(todoItem)
localStorage.setItem("todoList", JSON.stringify(todoList));

 

But 여기서 문제, 새로고침하면 로컬스토리지엔 남으나 페이지에선 사라진다.

 

localStorage.getItem()할 경우 문자열을 반환하므로 이를 JS의 객체로 바꾸어주어야 한다. 즉, 배열로 바뀐다.

window.addEventListener("load", function () {
  todoList = localStorage.getItem("todoList")

  if (todoList !== null) {
    todoList = JSON.parse(todoList);
    for (let i = 0; i < todoList.length; i++){
      createTodoItem(todoList[i])
    }

  } else {
    todoList = []
  }
})

..

그 결과, 로컬스토리지에 있는 값들이 자동으로 로딩된다. 새로고침해도 남아있다.