TIL 221004 localstorage 응용

오늘(어제지만) 공부한 것

• 노마드 코더에서 배운 localstorage 응용
• 깃 커밋하는 방법
• 투두리스트 삭제 구현하려고 노력함(실패)

공부한 것 정리

localstorage에 값 저장

• 오브젝트 형식의 정보를 로컬스토리지에 넣어준 후, 그 값을 새로고침해도 불러올 수 있게 해야 됐다.
• 주의할점 !!! 로컬스토리지에는 문자열만 저장이 되기 때문에, 객체 형식의 자료를 저장하려면 JSON.stringify() 를 사용해서 문자열로 변환한 뒤, 저장해야 된다.
• 마찬가지로 값을 불러올 땐 문자열을 다시 객체로 바꿔줘야 되기 때문에, JSON.parse() 를 사용하도록 하자.

새로고침해도 정보가 남아있게?

• 노마드코더 강의에서 배운 것과 같이, 새로고침하면 화면의 투두목록이 초기화 된다. 이때, 로컬스토리지 안에 자료가 있는 상태라면, 자료를 뽑아와서 투두리스트 안에 목록을 재생성 해주면 된다.

function loadSavedList() {
  if (savedTodo !== null) {
    loadedData.forEach((data) => {
      let txt = data.txt;
      putValue(txt);
      setTodo(txt);
    });
  }

정말 한게 없어 보이지만..... 거의 아침 10시부터 저녁 9시까지 이거만 붙잡고 있었다ㅠ 왜 안되지?의 연속이었다 완전..... 나 혼자 코드 싹 뜯어고치면서 기능 추가하고 싶었는데, 계속해서 벽에 머리만 꽝꽝 박았음ㅎㅎ... 결국 구글링해서 가져왔는데, 문제는 가져오는 과정에서 거의 코드를 따라하게 되어버렸다. 원리를 제대로 이해하긴 했는데.................이래도 되는 건가 싶네....ㅠㅠ

근데 삭제 기능은 왜 제대로 안되는지 모르겠다. 버튼을 누르면 그 버튼을 가진 부모 요소(li)를 삭제하면서 로컬스토리지 안에 있는 값도 삭제해야 되는데,

let tmp = [];
tmp = toDos.filter((toDo) => toDo.id !== Number(li.id));
  localStorage.setItem(dataKey, JSON.stringify(tmp));

이렇게 하니까 삭제 버튼을 누르면 자꾸 로컬스토리지 배열 안의 객체들을 전부 없애버리는 것이다...
어 이게 아닌데? 하고 뭐가 문제인가 싶어서 하나하나 콘솔 찍어보면서 했는디... 필터 함수를 처리하면서 빠져나온 값이 tmp 배열에 안 들어가고 있다. 내 수준에서는 이게 왜 적용이 안되는지 모르겠어서ㅠㅠ... 걍 놔둠....

모르겠는거 물어보면 알려줄 수 있는 사람이 있으면 좋겠단 생각을 했다....

++
노마드코더 바닐라js 강의에 관련 내용이 있네(심지어 구현 방식도 똑같음... 내가 참고한 블로그 글도 노마드코더 강의 듣고 쓴 글이었던걸까?