[자바스크립트] localStorage 데이터 저장/삭제 해결 방법

 

이전에 TO DO LIST와 유사한 쇼핑목록 웹사이트를 만들었다.

입력, 삭제가 가능하지만 페이지를 새로고침 하면 사라졌다.

​

 

 

 

[JavaScript] (해결) 동적으로 font awesome 아이콘 추가하기

 

이제는 더 나아가 페이지를 새로 고침해도 데이터가 남아 있게 만들고 싶었다.

구글링 해보니 localStorage가 있었다.

 

참고:

Window.localStorage - Web APIs | MDN

 

 

---

쇼핑 목록 웹사이트와 비슷한 부분이 있어서 금방 만들었다...고

생각했는데 수정할 부분이 많아서 시간이 꽤 걸렸다 ^^

결국 클론코딩에 성공. 그리고 왜 작동하는지.. 의문을 품은채 다음 단계로 넘어갔다.

구글 이미지 검색

---

데이터를 저장하는 건 쉽게 해결했다. (박수 짝짝)

​

엔터키나 'Enter'버튼을 클릭해서 항목을 저장한다.

그리고 휴지통을 클릭해 항목을 삭제한다.

그리고 또 다른 문제가 발생한다.

​

내가 원하던 것은 쓰레기통을 클릭하면, 그 쓰레기통의 문장이 사라지는 것이다!

일반 TO DO LIST처럼!!

​

하지만..

이렇게 한 항목(pay bills)을 삭제한 후

밑 항목들의 쓰레기통 버튼이 클릭이 안 된다...ㅏ...

​

새로고침을 눌려야 그 다음 항목이 삭제가 된다.

​

분명 잘못된 부분이 없는데 도대체 왜.. 나한테 그러는 것일까 몇시간을 고민했다.

그리고 이제 슬 익숙해진 stackoverflow에 질문을 남겼다.

​

​

(코드는 링크에 나와있습니다.)

Remove item and its data from localStorage when I click an icon

질문 올리고 낮잠 자고 일어나니 답글이 달렸다.

​

<문제점>

const delBtn = document.querySelector(".fa-trash-alt");

<수정 후>

const delBtn = itemRow.querySelector(".fa-trash-alt");

Aㅏ.... document를 itemRow로 적었어야 했다..

이 하나때문에 안 됐다니 정말 프로그래밍의 세계는 멀고도 험하구나 느꼈다.

​

이제 작동 된다!!

역시 스택오버플로우는 최고라는 걸 느꼈다.

​