TIL #13 | localStorage 사용 방법

kibi·2023년 10월 30일

JavaScript TIL

TIL (Today I Learned)

목록 보기

13/83

localStorage

localStorage를 사용하면 웹 브라우저에 로컬데이터를 저장할 수 있기 때문에 데이터 불러오기, 추가 및 삭제가 가능하다.

localStorage 사용 방법

데이터 저장하기
localStorage.setItem('key', 'value')

데이터 가져오기
localStorage.getItem('key')

데이터 삭제하기
localStorage.removeItem('key')

localStorage에 반영된 데이터를 확인하는 방법

개발자 도구>Application>Local storage 탭에서 현재 로컬 스토리지에 반영된 데이터를 확인할 수 있다.

localStorage 실습

localStorage에 데이터 저장하기

localStorage.setItem

// localStorage에 리뷰 리스트 저장

reviews = []

function saveReviews() {

localStorage.setItem("reviews", JSON.stringify(reviews));

}

localStorage에서 데이터 가져오기

localStorage.getItem

// localStorage에 저장된 리뷰 리스트 불러오기

  const savedReviews = localStorage.getItem("reviews");

  if (savedReviews !== null) {
    const parsedReviews = JSON.parse(savedReviews);
    reviews = parsedReviews;
    parsedReviews.forEach(drawReviews);
  }

localStorage에서 데이터안의 객체 삭제하기 (수정 후 반영)

const deleteBtn = document.querySelector(".deleteBtn");

deleteBtn.addEventListener("click", function (event) {
const li = event.target.parentElement; // 부모 요소

// 요소 삭제
li.remove();

// 선택한 id값을 제외한 배열 반환 
reviews = reviews.filter((review) => review.id !== parseInt(li.id)); 

// localStorage에 저장
localStorage.setItem("reviews", JSON.stringify(reviews));

});

JSON

JSON.parse()

JSON.parse() 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성한다.

JSON.stringify()

JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환한다.

문제 해결

const deleteBtn = document.querySelector(".deleteBtn");

deleteBtn.addEventListener("click", function (event) {
const li = event.target.parentElement;
console.log(typeof li.id);
li.remove();
reviews = reviews.filter((review) => review.id !== parseInt(li.id)); // 선택한 값을 제외한 배열 반환
saveReviews();
});

위와 같이 querySelector로 가져온 삭제 버튼에 addEventListener 메서드를 호출했을 때

추가된 리스트에서 삭제 버튼을 누르면 첫번째 리스트만 삭제 되는 문제가 생겼다.

모든 리스트 요소에서 삭제 버튼이 구동하도록 하기 위해 querySelectorAll을 사용해서 모든 삭제 버튼을 가져온 뒤 추가된 모든 버튼 요소를 선택한 배열에 forEach 배열 메서드를 사용해서 각 요소의 값을 가져올 수 있도록 하였다.

const deleteBtnAll = document.querySelectorAll(".deleteBtn");

  deleteBtnAll.forEach((item, index) => {
    item.addEventListener("click", function (event) {
      let reviewEl = event.target.parentElement; // 부모 요소
      const pwElement = reviewEl.querySelector("#password");
      const prevPw = pwElement.getAttribute("data-value"); // 저장된 password 값
      let savedID = parseInt(event.target.id); // 저장된 id 값
      handleModal(reviewEl, savedID, prevPw);
    });
  });