자바스크립트 로컬저장소에서 데이터 불러오다가 생긴 문제 해결

 

새로고침하고 기존에 저장된 데이터들을 가져오는 것 까진 문제가 없었으나, 거기서 새로운 input을 넣으면 기존의 값들은 다 날아가는 문제가 있었다.

 

이런 문제가 발생한 원인은, 인풋을 todo배열에 저장하고, 그때마다 새로운 todo배열로 저장소 내역을 덮어씌우는 식으로 로직을 짰기 때문이었다.

 

 

todo에 객체들을 저장하고 local storage에 저장하는 것 까지는 문제가 없었으나, todo배열 자체는 새로고침 후엔 텅 빈 상태가 된다. 어찌보면 당연한 거지만 뭐가 문제인지 뒤늦게 눈치챔;

 

여기서 새 input을 넣으면 기존의 값들은 todo배열에 저장되지 않은 채 새로운 값만 저장되고, 로컬 저장소에 덮어쓰게된다. 그러니 당연히 한번 더 새로고침하면 기존값들은 날아가고 없고 새로 입력한 값만 보이는 것이다.

 

loadedItems.forEach((item) =>todoItems.push(item));

 

새로 로드할 때마다 parse한 후 위와 같이 todo 배열에 기존 아이템을 채워넣는 식으로 문제를 해결했다.

 

로컬저장소에 아이템을 넣고, 가져오는 것 자체는 정석대로 한 것 같은데 데이터 관리를 효율적으로 하지 못한 것 같아서 다음엔 다른 방법으로 시도해볼 생각이다.