23/10/28 TIL _ localStorage 데이터 삭제

 

 

⚽️    상황 

 

각 영화별 상세페이지에서 리뷰데이터를 localStorage에 저장 및 삭제를 하고 싶었다 

저장 하고 데이터를 보여주는 것 까지 진행이 되었는데, 

삭제기능이 구현되지 않아서 팀원분과 함께 구현했다. 

 

 

데이터 구조

데이터 구조는 localStorage 에서 데이터 키는 영화 아이디 값이 들어가 있었고, 
값으로 해당 영화에 대한 리뷰들이 배열 안에 각각의 객체로 들어가 있었다. 
그래서 삭제버튼을 눌렀을 때에, 그것에 대한 정보를 가져와서 데이터를 삭제해야 할 지가 관건이였다. 

 

 

 

 

🏀    사고 과정

 

1. 데이터를 집어넣을때 리뷰값을 구별할 임의값을 함께 집어넣는다. 
2. 해당 임의값을 리뷰 데이터를 감싸는 태그의 아이디 값으로 집어넣는다. 
3. 버튼 클릭 이벤트가 발생하면, 해당 요소의 부모요소에 넣어둔 아이디 값을 가져온다.
4. 가져온 아이디 값이  리뷰데이터가 담긴 배열들을 반복하며  데이터에 있는지 확인한다. 
5. 있을 경우 해당 배열의 인덱스를 추출해서 splice를 이용해 잘라준다. 
6. setItem을 이용해서 자른 배열을 다시 넣어준다. 

 

 

 

⚾️    어려웠던 부분

 

  데이터를 집어넣을때 각 리뷰들을 구별할 임의값을 집어넣는 부분이 어려웠다. 

Math.rendom() 을 이용해서 진행해 본 경험이 있지만, 직접 짠 코드는 아니였지만 이해는 했다. 

이번에는 변수에 숫자를 넣은 후, 데이터를 집어넣을 때마다 숫자가 1씩 증가하도록 구상했다. 

그런데 예상처럼 작동하지 않고, 증가 시스템에서 계속 같은 수를 찍는다던지, 새로고침 되면 1을 찍어내는 상황이 발생했다. 

 

곰곰히 생각해 보니, 단순히 1씩 증가시키는 것 뿐만 아니라, 현재 데이터가 저장되어 있는 값을 가져온 후,

그 값을 기준으로 1을 증가시켜야 했고, 

추가로 데이터가 아예 존재하지 않을 경우에는 값이 없기 때문에, 그런 경우에 대한 처리를 해줘야 했다. 

 

 

 

 

🚗   localStorage  데이터 삭제하기 해결 과정  (배열값 내부 객체)

 

//각 영화별 리뷰 구분할 식별자값
let reviewNum = 0;

// 관람평 저장 버튼 누르면 입력한 데이터 저장되는 함수.
function onLogin(event) {
  event.preventDefault(); 

  // 입력값 유효성 검사 통과하면
  if (chkInput() == true) {
    if (reviewNum > 0 || oldReviews.length > 0) {
      reviewNum = oldReviews[oldReviews.length - 1].reviewNum;
    }
    reviewNum++;
    
    id = loginId.value;
    pwd = loginPwd.value;
    reviewPoint = loginReviewPoint.value;
    review = loginReview.value;

    const newReview = new Review(
      movieId,
      reviewNum,
      id,
      pwd,
      reviewPoint,
      review
    );

    window.localStorage.setItem(
      movieId,
      JSON.stringify([...oldReviews, newReview])
    );
    
    location = location;
    return reviewNum;
}

 

 

// 댓글 삭제 기능
const userRevDelete = document.querySelector(".td-userRevDelete");

let modifyGet = window.localStorage.getItem(movieId);
modifyGet = JSON.parse(modifyGet);

reviewUl.addEventListener("click", (e) => {
  	if (e.target.className === "td-userRevDelete") {
        let empty;
        const mm = modifyGet.map((a, i) => {
          if (String(a.reviewNum) === e.target.parentElement.id) {
            return (empty = i);
          }
	});

    modifyGet.splice(empty, 1);

    window.localStorage.setItem(movieId, JSON.stringify(modifyGet));
    location = location;
    const modifySet = 0;
  }
});