Deleting to dos(in JavaScript)(1)

to do 삭제하는 버튼만들기

addEventListener, event.target.parentElement 사용

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
// const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");//id가 todolist인 태그
 
function deleteToDo(event){
    const li = event.target.parentElement;//삭제하고싶은태그, 클릭한 이벤트의 부모태그(li) 가르키는 
    li.remove();//제거함
 
}
 
function paintToDo(newToDo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText=newToDo;//span태그 안에 innerText=newToDo 추가
    const button= document.createElement("button");
    button.innerText="X";
    button.addEventListener("click", deleteToDo);
    li.appendChild(span);//li 태그안에 span 태그를 추가
    li.appendChild(button);
    toDoList.appendChild(li);//li 태그 붙여줌 html에 최종적으로 들어가게됨
}
 
function handleToDoSubmit(event){
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value="";
    paintToDo(newToDo);
  
}
 
toDoForm.addEventListener("submit", handleToDoSubmit);

 

to do 저장하기(새로고침시 사라지는 문제 해결)

 

JSON.stringify() , JSON.parse 이용 (문자화, js에서 이용가능한 object로 변환)

 

todos 라는 array 만들고 newtodo가 그려질때마다 그 텍스트를 array에 push 하기 

그리고 배열을 localStorage에 넣기

그런데 localstorage엔 텍스트만 넣을수 있지 배열은 불가

무슨말이냐면 예를들어 a라는배열이 ["min", "jin", "jeong"]일때

localstorage 에 넣으면 걍 min, jin,jeong 으로 보임 value안에 보면 

localstorage.setltem("todos", a) 같이 넣어주면 배열로 안들어가고 텍스트로 들어가게됨 

그래서 JSON.stringfy()이용, 이건어떤 자바스크립코드간에 스트링형으로 바꿔줘 

JSON.parse 는 실제 배열로 바꿔줘 

 

아래가 JSON.stringify랑 JSON.parse 이용예시

 

localstorage에 to do list 저장하고 새로고침시 불러와서 그리고싶음

parse() 메서드는 JSON 문자열을 인자로 받고 결과값으로 JavaScript 객체를 반환합니다

 

배열의 각 원소에 대해 각각 함수 실행 ; foreach 메서드이용=>ArrowFunction 

 parseToDos.forEach((item) => console.log("this is a turn of ", item))//배열각 원소를 차례로 item에 넣어 실행

 

 

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
// const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");//id가 todolist인 태그
const toDos =[];
const TODOS_KEY ="toDos";
function saveToDos(){
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));//toDos를 큰따옴표가들어가게 바꿔주고 local에 저장 
}
 
function deleteToDo(event){
    const li = event.target.parentElement;//삭제하고싶은태그, 클릭한 이벤트의 부모태그(li) 가르키는 
    li.remove();//제거함
 
}
 
function paintToDo(newToDo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText=newToDo;//span태그 안에 innerText=newToDo 추가
    const button= document.createElement("button");
    button.innerText="X";
    button.addEventListener("click", deleteToDo);
    li.appendChild(span);//li 태그안에 span 태그를 추가
    li.appendChild(button);
    toDoList.appendChild(li);//li 태그 붙여줌 html에 최종적으로 들어가게됨
}
 
function handleToDoSubmit(event){
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value="";
    toDos.push(newToDo);
    paintToDo(newToDo);
    saveToDos();
}
 
toDoForm.addEventListener("submit", handleToDoSubmit);
 
const savedToDos = localStorage.getItem(TODOS_KEY);
if(saveToDos!==null){//localstorage에 todo가 저장되어있다면 
    const parseToDos = JSON.parse(savedToDos);//todo 저장된거 찐배열로만들어줘
    parseToDos.forEach(paintToDo);//배열 parsetodo 각원소를 paint todo 함수에 넣어 실행 시켜줘
        
    };//새로고침해도 그대로 todos 남게됨

 

여기까지 하면 새로고침해도 todo 쓴거 남게됨 그런데 문제는 새로고침시 이전에 썼던거 localstorage에 저장안되어있음

새로쓰는것만 다시 저장하게 됨

 

그 이유는 다시 새로고침할때 todos가 빈 배열인 상태이기때문..

그상태에서 새로운거 newtodo 입력하고 위의 자바스크립트 코드 다시 돌아가는 순간 todos가 빈칸인게 실행되징 

push를 할때 빈 todos 배열에 newtodo 만 하고있으니 localstorage가 새로운거만 들어가게 됨

따라서 todos 를 let으로 변경가능한 변수로 만들어 

 

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
// const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");//id가 todolist인 태그
let toDos =[];//localstorage에 새로고침시 기존에 있던거 넣어주기 위해 변경가능한 변수로만들어  
const TODOS_KEY ="toDos";
function saveToDos(){
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));//toDos를 큰따옴표가들어가게 바꿔주고 local에 저장 
}
 
function deleteToDo(event){
    const li = event.target.parentElement;//삭제하고싶은태그, 클릭한 이벤트의 부모태그(li) 가르키는 
    li.remove();//제거함
 
}
 
function paintToDo(newToDo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText=newToDo;//span태그 안에 innerText=newToDo 추가
    const button= document.createElement("button");
    button.innerText="X";
    button.addEventListener("click", deleteToDo);
    li.appendChild(span);//li 태그안에 span 태그를 추가
    li.appendChild(button);
    toDoList.appendChild(li);//li 태그 붙여줌 html에 최종적으로 들어가게됨
}
 
function handleToDoSubmit(event){
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value="";
    toDos.push(newToDo);
    paintToDo(newToDo);
    saveToDos();
}
 
toDoForm.addEventListener("submit", handleToDoSubmit);
 
const savedToDos = localStorage.getItem(TODOS_KEY);
if(savedToDos!==null){//localstorage에 todo가 저장되어있다면 
    const parseToDos = JSON.parse(savedToDos);//todo 저장된거 찐배열로만들어줘
    toDos = parseToDos;//toDos에 localstorage에 저장된 todo 들 넣어줌 
    parseToDos.forEach(paintToDo);//배열 parsetodo 각원소를 paint todo 함수에 넣어 실행 시켜줘
        
    };//새로고침해도 그대로 todos 남게됨

새로고침시 이전에 저장된거 localstorage에 남아있게됨

 

그런데 이제 지우고자 할때 화면에선 지워져도 localstorage에선 그대로 남게되는 문제가 있음