toDoList를 입력하고 배열형식의 toDos를 JSON.stringity()를 이용해 문자열의 형태로 저장해주는 것까지했다.
오늘은 저장한 문자열을 배열의 형태로 만들어줘서 화면에 하나씩 보이게 할 것이다. 그러고 나서 삭제버튼을 누르면 저장된 값도 같이 삭제되게 해주자.

JSON.stringify() vs. JSON.parse()

입력된 값을 string의 형태로 저장해주기 위해 JSON.stringify(toDos);를 사용해 줬다.

//javascript의 object나 array를 string으로 바꿈
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); 

이렇게 저장된 String값을 배열의 형식으로 꺼내주려면 JSON.parse()를 사용해주면된다.

 //string에서 javascript에서 사용가능한 object나 array로 만듦
JSON.parse(localStorage.getItem(TODOS_KEY);

JSON.stringify()한 결과와 JSON.parse()한 결과를 가져온다.
String과 array의 특징을 갖는다는 것을 알 수 있다.

---

---

foreach()
배열형식으로 저장된 값을 하나씩 가져와서 나타낼 때 많이 쓰임

localStorage에 저장된 값을 배열의 형식으로 값을 꺼내고 하나씩 콘솔에 나타내 보자.

function sayHello(item){
    console.log("this is the turn of ", item);
}

//localStorage에 저장된 toDos 값 가져오기
const savedToDos = localStorage.getItem(TODOS_KEY);

if(savedToDos!=null){
    const parsedToDos = JSON.parse(savedToDos);
    //배열의 items를 하나씩 꺼내 입력
    parsedToDos.forEach(sayHello);
}

값을 하나씩 잘 뽑아왔다. 근데 위의 방법보다 더 간단한 코딩법도 존재한다.

arrow function

function을 지우고 foreach에 작성하는 방법이다.

//localStorage에 저장된 toDos 값 가져오기
const savedToDos = localStorage.getItem(TODOS_KEY);


if(savedToDos!=null){
    const parsedToDos = JSON.parse(savedToDos);
    //parsedToDos에 있는 item들을 각각 console.log하자.
    parsedToDos.forEach((item) => console.log("this is the turn of ", item));
}

- 화면에 todolist보이게 하기

1. 저장된 todo값 화면에 띄우기

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "toDos";

//이전에 저장한 값들을 포함하기 위해 let 변수명으로 선언
let toDos = [];

function saveToDos(){
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); //javascript의 object나 array를 string으로 바꿈
}

function deleteToDo(event){
    const li = event.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 handleToSubmit(event){
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value="";  //input상자에 내용 지우기
    toDos.push(newToDo);
    paintToDo(newToDo);
    saveToDos();
}

toDoForm.addEventListener("submit", handleToSubmit);

//localStorage에 저장된 toDos 값 가져오기
const savedToDos = localStorage.getItem(TODOS_KEY);


if(savedToDos!=null){
    const parsedToDos = JSON.parse(savedToDos);
    //이전에 저장된 값들을 toDos에 저장
    toDos=parsedToDos;
    //parsedToDos에 저장된 값을 li에 추가
    parsedToDos.forEach(paintToDo);
}

화면과 localStorage 모두 이전에 입력한 값과 새로 입력한 값 모두 잘 들어간다.

-toDoList 값 완전 삭제하기

삭제를 편하게 하기위해 text뿐만아니라 id를 지정해주기 위해서는 toDos에 object로 저장해줘야한다.
그래서 newTodoObj를 만들어줬다. text는 입력된 값을 저장하고 id는 랜덤으로 숫자를 얻기위해 Date.now()를 이용해줬다.

const newTodoObj = {
    text : newToDo,
    id : Date.now(),
}

toDos에 object로 저장해주기 위해 toDo.push(newTodoObj); paintToDo(newTodoObj);로 수정한다.

그 상태로 값을 새로 입력해보면 [Object object]로 리스트가 나타나게 된다. id는 나타내지 않고 text만 보이게 하기위해서는 paintToDo 함수에서 span.innerText = newToDo.text;로 수정하고 li에 id를 지정하기 위해 li.id=newToDo.id;로 수정한다. 그럼 값이 잘 들어가는 걸 볼 수 있다.

배열에서 지우고 싶은 id를 삭제해주려면 filter함수를 사용하면 된다. filter함수는 항상 true로 반환해야 하고 false인 값은 포함되지 않는 특징을 가진다.
console.log(li.id);를 작성해서 리스트를 삭제하면 삭제된 id를 확인할 수 있는데 이것을 이용하면 localStorage에서 완전 삭제할 수 있다.

deleteToDo 함수에 toDos = toDos.filter((toDo) => toDo.id != parse(li.id)); saveToDos(); 를 추가한다.
리스트를 삭제하면 삭제된 리스트의 id와 localStorage에 저장된 id를 비교해 해당 값을 삭제하고 toDos에 변경된 내용으로 저장하게 된다.

이때 주의할 점은 li.id의 타입은 String이므로 parseInt를 붙여줘야한다.

완성된 코드는 아래와 같다.

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "toDos";

//이전에 저장한 값들을 포함하기 위해 let 변수명으로 선언
//text를 저장하지 않고 object를 저장함
let toDos = [];

function saveToDos(){
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); //javascript의 object나 array를 string으로 바꿈
}

function deleteToDo(event){
    const li = event.target.parentElement;
    li.remove();
    toDos = toDos.filter((toDo) => toDo.id != parseInt(li.id));
    saveToDos();
}

function paintToDo(newToDo){
    const li = document.createElement("li");
    li.id = newToDo.id;
    const span = document.createElement("span");
    span.innerText = newToDo.text;
    const button = document.createElement("button");
    button.innerText="❌";
    button.addEventListener("click", deleteToDo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

function handleToSubmit(event){
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value="";  //input상자에 내용 지우기
    const newTodoObj = { //text를 저장하지 않고 object를 저장함
        text:newToDo,
        id:Date.now(), 
    }
    toDos.push(newTodoObj   );
    paintToDo(newTodoObj);
    saveToDos();
}

toDoForm.addEventListener("submit", handleToSubmit);

//localStorage에 저장된 toDos 값 가져오기
const savedToDos = localStorage.getItem(TODOS_KEY);


if(savedToDos!=null){
    const parsedToDos = JSON.parse(savedToDos);
    //이전에 저장된 값들을 toDos에 저장
    toDos=parsedToDos;
    //parsedToDos에 저장된 값을 li에 추가
    parsedToDos.forEach(paintToDo);
}

c와 d의 삭제버튼을 누르면
삭제된 것을 볼 수 있다.