js toDoList filter

const todo = document.querySelector("#todo")
const todoInput = todo.querySelector("input");
let todos = [];

function save(){
    localStorage.setItem("todos",JSON.stringify(todos));
}
function pressButton(event){
    const list = (event.target.parentElement);
    list.remove();
}
function putlist(value){
    const list = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    button.innerText="X";
    span.innerText=value;
    list.appendChild(span);
    list.appendChild(button);
    const ul = document.querySelector("#list");
    ul.appendChild(list);
    
    button.addEventListener("click",pressButton);
    
}
function addList(event){
    event.preventDefault();
    const push = todoInput.value
    const input = todoInput.value;
    todos.push(push);
    todoInput.value="";
    putlist(input);
    save();
}
todo.addEventListener("submit",addList);

const store = localStorage.getItem("todos");
if(store)
{
    const item = JSON.parse(store);
    console.log(item);
    todos = item;
    console.log(todos);
    item.forEach(putlist);
}

이상태에서 남은 문제.

X를 눌렀을때 <ul> 내부 <li>는 삭제 되지만 localStorge에는 남아있어서 refresh시에 다시 생겨남.

pressButton 함수에서 삭제를 localStorage에도 관여해야함.

 

addList 함수에서

const push = {
        text:todoInput.value,
        id:Date.now()
    }

위와같이 입력값과 시간에 기반한 id를 포함한 object 형태로 바꾸어준다.

위 형태로 보내면 localStroage에는 정상적으로 입력되지만 list에서 오류가 발생.

putlist에서 innerText에 object의 항목이름 .text를 추가해줬다.

 

function pressButton(event){
    const list = (event.target.parentElement);
    console.log(list.id);
    list.remove();
}

그 후 삭제 버튼을 눌렀을 때 해당 버튼의 list의 id를 확인할 수 있다.

 

이제 localStorage에서 삭제하기 위해

filter() 함수를 사용.

배열.filter(함수) 하면 해당 배열을 인자로 함수를 실행하는데

해당 배열의 요소로 함수를 실행했을 때 true가 반환되는 요소만 남기고

false가 반환되는 요소는 제외하고 새로운 배열을 만들어서 해당 배열을 바꾸어줌.

false가 반환되는 요소를 삭제하는 것 같은 기능이 됨.

 

삭제 역할을 수행하는 함수에

todos=todos.filter((id)=>(id.id!==Number(list.id)));

위 부분을 넣어서 todos에 있는 id 중 버튼을 누른 부분의 id와 같으면 제외되도록 한다.

그후 save 함수를 실행해서 localStorage를 업데이트 해주면 계획대로 구현이 된다.