이전에 작업했었던 todo list를 활용하여 local storage에 데이터를 저장시키는 방법을 복기해보자

local Storage에 추가

function saveData(){    
    localStorage.setItem("listSave", JSON.stringify(listSave))
}

local storage에 저장할 경우 setItem 이라는 메소드를 사용한다.
JSON형식으로 저장해야되기 때문에, key, value를 인자로 전달해줘야 하고, 모두 string 형태로 입력되어야 한다.

local Storage에 삭제

function deleteData(id){ // 여기의 id는 list에서 삭제키로 선택된 id
    const cleanList = listSave.filter(function(item){ 
        return item.id !== parseInt(id);
        //item.id = number
        //li.id = string -> parseInt 사용(숫자로 반환)
    });
    listSave = cleanList;
    saveData();
}

여기서 listSave 는 localStorage 에 저장된 객체이다.
localStorage에 저장된listSave 의 id 모음 중에서 클릭한 id를 제외하고 cleanList 에 저장한다.
그리고, listSave 가 cleanList 가 되도록 하면 삭제 끝!

추가) local Storage에서 데이터 불러오기

function loadLists(){
    const loadedLists = localStorage.getItem("listSave"); 
    if(loadedLists !== null){
        const parsedLists = JSON.parse(loadedLists);
        parsedLists.forEach(list => {
            createItem(list.text)
        });
    }
}

getItem() 메소드를 사용하면 , local Storage 내 인자로 넣은 키 이름과 일치하는 키값을 반환한다.
forEach 를 사용하여 반환받은 내역을 createItem 일라는 list로 올려주는 함수를 사용해서 화면에 추가해준다.