Delete to do(in JavaScript)(2)

발생한 문제점 ;

표면적으로 to do 리스트 지워도 localstorage에 남아있어서 새로고침시 다시 지웠던거까지 불러오는 문제있음

그런데 지금과 같은 상황에서는 화면에서 todo를 지웠을때 

local storage에서 어떤 item을 지웠는지 몰라서 지울수 없음 

 

해결법; 

각 to do 당 id를 도입해 그냥 text가 아닌 object화 시켜 지울 대상 알게함

ex) { id : 1212, text : "drink" }

랜덤으로 id만들기 위해서는 Date.now() 함수 사용 (밀리초를 주는 함수)

 

그냥 택스트를 todo배열에 넣어주는 식인 

toDos.push(Newtodo)를 수정해서 배열에 id가 포함된 원소 넣어줌

 

localstorage에 id가 들어간 형태로 저장됨

 

이제 만든 id를 사용해 localstorage에서 화면에서 삭제한거 지우기 작업 ;

id를 html에 두기

이전  newtodo를 text형식으로 주는게 아닌 object주기로 바꾸고  

id로 각각의 li 나중에 골라서 삭제할 수 있도록 item 구별하기 

삭제버튼 누를시 어떤 li 태그에 해당하는 걸 눌렀는지 id얻을 수 있게됨 

이제 array 에서 item지우는 법 알아야 => filter 함수 사용 

 

filter ; 지우고 싶은 item 빼고 새로운 배열을 만듦 

실행원리는 아래와 같은 1,2,3,4,5배열이 있을때 각 원소를 filter안에 들어간 함수 sexyfilter에 차례로 넣으면서 

그 값이 ture면 원소 그대로 리턴, false면 그 원소 포함 안한 새 배열을 만듦(원래 배열이 바뀌는게 아닌 새 배열 만듦!)

 

아래가 사용예)

 

3이 아닌것만 포함된 배열 만듦

1000보다 작은것만 포함한 배열만듦

우리가 사용할 방식

 

함수 따로 안만들고 바로 filter안에 넣는 방식

함수를 따로 만든다면

function sexyfilter(item){ return item>2} ;

arr.filter(sexyfilter); 

가 되겠지만 위와같이 간단하게 작성가능 

 

filter랑 id 적용한 코드( todo 삭제시 localstorage에서도 삭제되어 새로고침시 삭제버튼 누른거 적용됨, 삭제버튼 눌러도 localstorage에서는 삭제가 안되어 새로고침시 삭제버튼 누른거 다시 불러오는 문제해결!! 끄읏 )

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에 저장 
    //localstorage에는 toDos그 자체인 obj(배열)은 저장 불가, stringify 필수 
}
 
function deleteTodo(event){
    const li = event.target.parentElement;//삭제하고싶은태그, 클릭한 이벤트의 부모태그(li) 가르키는 
    li.remove();//삭제버튼누른거 화면에서 제거함
    toDos = toDos.filter((item) => item.id !== parseInt(li.id));//삭제버튼누른거 제외하여 todos를 업데이트시킴 
    //item.id는 number이고 li.id는 string이기때문에 형변환(typeof로 형확인가능)
    //ToDos는 localstorage에있는 데이터를 복사해서(가져와서)(getitem) 수정한거일뿐 localstorage는 변함없음 주의!! 
    //따라서 저장시켜야 함 (setitem)
    saveToDos();
}
 
function paintToDo(newTodo){
    const li = document.createElement("li");
    li.id = newTodo.id;//id로 각각의 li 구별하기(나중에 골라서 삭제할수있도록)
    const span = document.createElement("span");
    span.innerText=newTodo.text;//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="";
    const newTodoObj = { text : newTodo, id : Date.now()};
    toDos.push(newTodoObj);
    paintToDo(newTodoObj);//그냥 텍스트형태아닌 obj형태로 전달 
    saveToDos();
}
 
toDoForm.addEventListener("submit", handleToDoSubmit);
 
const savedToDos = localStorage.getItem(TODOS_KEY);//value값 얻어 
 
if(savedToDos!==null){//localstorage에 todo가 저장되어있다면 
    const parseToDos = JSON.parse(savedToDos);//todo 저장된거가져와서 obj화 시켜 찐배열로만들어줘
    toDos = parseToDos;//toDos에 localstorage에 저장된 todo 들 넣어줌 
    parseToDos.forEach(paintToDo);//배열 parsetodo 각원소를 paint todo 함수에 넣어 실행 시켜줘
        
    };//새로고침해도 그대로 todos 남게됨