반응형
배운점
- localStorage 사용하여 브라우저를 껐다가 다시 접속해도 기존에 입력된 항목이 유지될 수 있도록 설정
- localStorage 는 key - value 형식으로 저장된다.
- 입력값을 JSON 객체로 생성하고 JSON.stringify() 이용하여 localStorage 저장한다.
- 저장값 불러올 때는 JSON.parse() 으로 객체화 한다.
참고 사이트
https://ko.javascript.info/localstorage
localStorage와 sessionStorage
ko.javascript.info
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Todo list</title>
</head>
<style>
* {
box-sizing: border-box;
font-size: 20px;
}
h1 {
padding: 5px;
font-style: italic;
background-color: peachpuff;
}
input {
width: 90%;
height: 30px;
font-size: 20px;
}
/* button1 */
.button1 {
position: relative;
width: 5%;
background-color: beige;
}
.button1:hover,
.button1:focus {
background-color: #ffcfcf;
}
.delete {
margin-left: 20px;
}
/* content */
.content {
/* width: max-content; */
border-bottom: 1px dashed black;
margin: 3px;
padding: 4px;
/* background-color: #d9d6b6; */
background-color: #ffeeee;
}
.content:hover {
/* background-color: rgb(255, 182, 193); */
background-color: #ffcfcf;
font-weight: bolder;
}
.content.done {
text-decoration: line-through;
background-color: whitesmoke;
color: gray;
}
</style>
<body>
<h1>Todo list</h1>
<input type="text" placeholder="to do" />
<button class="button1">+</button>
<div class="content-list"></div>
</body>
<script>
let contentList = document.querySelector(".content-list");
// 저장된 컨텐츠 불러오기
let lastIdx = localStorage.length;
let localTodos = JSON.parse(localStorage.getItem("todos"));
console.log(localTodos);
if (localTodos) {
localTodos.forEach((obj) => makeContent(obj));
}
let input = document.querySelector("input");
let btn = document.querySelector("button");
btn.onclick = () => {
makeContent({ content: input.value, done: false });
saveTodoList();
input.value = "";
};
function makeContent(obj) {
let div = document.createElement("div");
div.classList.add("content");
div.textContent = obj["content"];
if (obj && obj.done) {
div.classList.add("done");
}
div.onclick = (event) => {
// delete
if (event.target.tagName == "BUTTON") {
event.target.parentElement.remove();
} else {
// 체크 해제
if (div.classList.contains("done")) {
div.classList.remove("done");
// 체크
} else {
div.classList.add("done");
}
}
// localStorage update
saveTodoList();
};
let divBtn = document.createElement("button");
divBtn.classList.add("delete");
divBtn.textContent = "delete";
div.append(divBtn);
contentList.append(div);
}
function saveTodoList() {
let todos = [];
document.querySelectorAll(".content").forEach((content) => {
todos.push({
content: content.firstChild.textContent,
done: content.classList.contains("done"),
});
});
localStorage.setItem("todos", JSON.stringify(todos));
}
</script>
</html>
반응형
'Study > JavaScript' 카테고리의 다른 글
| JavaScript 미니 프로젝트 _ 숫자 맞추기 게임 (1) | 2023.09.11 |
|---|---|
| DOM 노드와 주요 프로퍼티 (0) | 2023.08.30 |
| 문서 객체 모델 DOM (0) | 2023.08.29 |
| 자바 스크립트 기본 (0) | 2023.08.28 |
