dearbeany
[ToDoList] 추가, 삭제 기능 구현 및 로컬스토리지 이용 본문
태그 자체로 가져올 경우 등록 후 초기화 가능 (반면, 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
나의 할 일 목록
로컬스토리지 사용해서 데이터 저장하기
- 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 = []
}
})
..
그 결과, 로컬스토리지에 있는 값들이 자동으로 로딩된다. 새로고침해도 남아있다.
'Web' 카테고리의 다른 글
[JDBC] 게시판 만들기 (3. DBUtil 클래스 생성 ~ 4. CRUD 완성 및 테스트) (1) | 2022.09.25 |
---|---|
[JDBC] JDBC의 작업순서 | 게시판 만들기 실습 (1.board 테이블 설계 ~ 2.Java 프로젝트 생성) (0) | 2022.09.25 |
[MySQL] 집계함수의 결과를 group by 없이 출력하기 (OVER) (0) | 2022.09.15 |
[Bootstrap] ToDoList 스타일 꾸며보기 (0) | 2022.08.30 |
[Youtube API] 검색어 입력으로 썸네일 이미지 받아오기 (0) | 2022.08.30 |