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

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

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

 

 

 

 

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

나는 쇼핑목록 앱을 만들고있다. TO DO LIST처럼 쇼핑할 물건들을 적는 리스트이다. 현재 문제점 : appendChild, innerHTML 등을 이용하여 font awesome icon을 추가하려한다. 이런식으로. 다만 x 표시(빨간색

breathtaking-life.tistory.com

 

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

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

 

참고:

 

Window.localStorage - Web APIs | MDN

The read-only localStorage property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions. localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiratio

developer.mozilla.org

 

 


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

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

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

구글 이미지 검색


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

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

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

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

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

일반 TO DO LIST처럼!!

하지만..

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

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

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

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

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

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

 

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

I'm making a To-Do List and trying to remove an item when I click a trash bin icon image not only the item but also its data from local storage. However, when I click the icon, only one data is rem...

stackoverflow.com

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

<문제점>

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

<수정 후>

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

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

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

이제 작동 된다!!

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


 

320x100