forEach문에 함수를 인자로 넣어주면 그 함수를 배열의 길이 만큼 반복한다.
사용자에게 입력받은 값을 로컬스토리지에 배열 형태로 저장했고, 화면에 li와 span 태그를 만들어서 각각의 값을 출력했다.(우리는 paintToDo라는 함수를 이미 가지고 있다.)
JS
const toDoForm = document.querySelector("#todo-form");
const toDoList = document.querySelector("#todo-list");
const toDoFormInput = toDoForm.querySelector("input");
const TODOS_KEY = "todos";
const toDos = [];
function saveTodos () {
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}
function deleteToDo(e) {
const li = e.target.parentElement;
li.remove();
}
function paintToDo (newToDo) {
const li = document.createElement("li");
const span = document.createElement("span");
span.innerText = newToDo;
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click", deleteToDo);
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}
function handleTodoSubmit (e) {
e.preventDefault();
const newToDo = toDoFormInput.value;
toDoFormInput.value = "";
toDos.push(newToDo);
paintToDo(newToDo);
saveTodos();
}
toDoForm.addEventListener("submit", handleTodoSubmit);
const savedToDos = localStorage.getItem(TODOS_KEY);
if (savedToDos !== null) {
const parseToDos = JSON.parse(savedToDos);
console.log(parseToDos);
parseToDos.forEach(paintToDo);
}- 마지막 if문을 보면 forEach의 인자로 paintToDo 함수를 넣어준 모습
- 이렇게 되면 parseToDo는 배열로 변환된 savedToDos를 갖게 되고
- 이 배열이 가진 아이템 숫자만큼 paintToDo를 반복한다.
- 이러한 로직은 if문 안에서 savedToDos가 빈 값이 아닐때만 작동하기 때문에 로컬스토리지에 todos라는 키를 가진 값이 없다면 작동하지 않는다.
배열에 가진 item들을 화면에 출력하기 성공 !
그러나 이전에 로컬 스토리지에 저장된 값은 새로운 값이 추가되면 사라진다.
문제가 생긴다면 문제를 해결해야한다!
결과:
- 크리스마스를 입력하자마자 로컬스토리지에 이전 값은 날아가고 새로 입력한 값이 덮어쓰기 된다!
- 이전 값과 새로운 값을 모두 유지하고 싶다.
- 이유는 application이 시작될 때 toDos array는 항상 비어있기 때문이다!!!
const toDos = [];- const로 선언한 빈 배열을 let으로 변경한다.
let toDos = [];- 이후에 로컬스토리지에 저장된 값이 있다면?
- 우리는 이미 이 로직을 if문을 통해 선언해 놓았다.
if (savedToDos !== null) {
const parseToDos = JSON.parse(savedToDos);
parseToDos.forEach(paintToDo);
}- 위 코드와 같이 toDos는 let 키워드로 선언된 빈 배열이다.
- let 키워드는 재선언은 안되지만 재할당은 가능하다.
- 때문에 toDos에 parseToDos를 재할당 시켜준다.
if (savedToDos !== null) {
const parseToDos = JSON.parse(savedToDos);
console.log(typeof parseToDos); // object
toDos = parseToDos;
parseToDos.forEach(paintToDo);
}- 콘솔 로그를 이용하여 parsToDos의 데이터 타입을 찍어보면 object가 출력된다 이는 아마도 배열이 객체 타입이기 때문일 것이다.
- toDos라는 빈 배열에 parseToDos 라는 이전에 저장한값을 덮어 씌워주면?
결과:
- 새로고침을 해도 이전값이 정상적인 syntax로 들어가있다.
- 이후에 새로운 입력값을 받아도 덮어 씌워지지 않는다.
이전 값을 저장하고 추가로 새로운 값을 입력해도 덮어 씌워 지지 않는다 하지만!!
X 버튼을 눌러도 로컬스토리지에 값이 계속 저장되어 있고 이로인해 새로고침 하면 이전 값이 여전히 출력된다.
다음 포스팅에서 🙋🏻♂️
현재 코드 상태:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momentum App</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<form id="login-form" class="hidden">
<input
required
maxlength="10"
type="text"
placeholder="What is your name?" />
<input type="submit" value="Log In" />
</form>
<h2 id="clock">00:00</h2>
<h1 id="greeting" class="hidden"></h1>
<form id="todo-form">
<input type="text" placeholder="Write a To Do and Press Enter" required/>
</form>
<ul id="todo-list"></ul>
<div id="quotes">
<span></span><br/>
<span></span>
</div>
<script src="JS/greetings.js"></script>
<script src="JS/clock.js"></script>
<script src="JS/Quotes.js"></script>
<script src="JS/background.js"></script>
<script src="JS/todo.js"></script>
</body>
</html>JS
const toDoForm = document.querySelector("#todo-form");
const toDoList = document.querySelector("#todo-list");
const toDoFormInput = toDoForm.querySelector("input");
const TODOS_KEY = "todos";
let toDos = [];
function saveTodos () {
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}
function deleteToDo(e) {
const li = e.target.parentElement;
li.remove();
}
function paintToDo (newToDo) {
const li = document.createElement("li");
const span = document.createElement("span");
span.innerText = newToDo;
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click", deleteToDo);
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}
function handleTodoSubmit (e) {
e.preventDefault();
const newToDo = toDoFormInput.value;
toDoFormInput.value = "";
toDos.push(newToDo);
paintToDo(newToDo);
saveTodos();
}
toDoForm.addEventListener("submit", handleTodoSubmit);
const savedToDos = localStorage.getItem(TODOS_KEY);
if (savedToDos !== null) {
const parseToDos = JSON.parse(savedToDos);
console.log(typeof parseToDos);
toDos = parseToDos;
parseToDos.forEach(paintToDo);
}
프론트엔드 개발자 지망생