[JavaScript] localStorage가 또 날 힘들게 하네

 

 

아임 피나 ...

 

노마드코더 강의 듣고 이해했다고 생각한 나 ... 반성하자

 

📍목표

구매 버튼 클릭시 상품 개수 저장하기

 

 

/**
 * 'cart' string이 반복되므로 오타 방지를 위해 변수에 담음
 * 노마드코더 바닐라 자바스크립트 강의에서 배운 꿀팁
 */
const CART = 'cart';

/** 모든 '.buy' 버튼 찾기 */
let buyBtn = document.querySelectorAll('.buy');

/** forEach로 각각의 buyBtn에 대해 아래 함수 실행 */
buyBtn.forEach((item) => {
  /** buyBtn 전전 위치에 있는 title 텍스트 값 추출
   * @todo 보기에 지저분하니 property 반복시 좀 더 효율적인 방법이 있는지 확인해보기
   */
  let title = item.previousElementSibling.previousElementSibling.textContent;
  /** buyBtn 클릭 횟수 초기화 */
  let num = 0;

  item.addEventListener('click', () => {
    /** buyBtn(item)을 한 번 클릭했을 때 +1 */
    num++;
    /** localStorage에 value가 있을 경우 */
    if (localStorage.getItem(CART) !== null) {
      /** 클릭한 buyBtn의 title값이 localStorage에 저장된 title에 같으면 num을 수정  */
      JSON.parse(localStorage.getItem(CART)).forEach((item) => {
        if (item.title === title) {
          item.num = num;
          
          
          ~채워야 할 구간~
          
          
      }
    }
    // 클릭한 buyBtn의 title값이 localStorage에 저장된 title에 없을 경우(다른 title 클릭시)

    // localStorage에 value가 없을 경우(페이지 처음 열었을 때)
    else {
      /** 위에서 추출한 title 텍스트값(title)과 증가한 클릭 수(num)를 array안의 object로 담기
       * key, value의 이름이 같으므로 {'key': key, 'value': value} 형태를 {key, value} 형태로 축약
       * array를 arr이라는 변수에 담음
       */
      let arr = JSON.stringify([{ title, num }]);
      /** local Storage의 key 값에 'cart', Value에 arr 배열 삽입 */
      localStorage.setItem(CART, arr);
    }
  });
});

 

클릭한 버튼의 title 값(상단의 title)이 로컬 스토리지에 저장된 배열 속 객체의 title 값과 같으면, (즉 동일한 상품의 구매 버튼을 눌렀을 경우) title 값이 같은 객체의 num을 상단의 num으로 바꾼다. (상품 개수를 추가한다)

 

 

  item.addEventListener('click', () => {
    /** buyBtn(item)을 한 번 클릭했을 때 +1 */
    num++;
    /** localStorage에 value가 있을 경우 */
    if (localStorage.getItem(CART) !== null) {
      /** 클릭한 buyBtn의 title값이 localStorage에 저장된 title에 같으면 num을 수정  */
      JSON.parse(localStorage.getItem(CART)).forEach((item) => {
        if (item.title === title) {
          item.num = num;
          
          
          ~채워야 할 구간~
          
          
      }
    }

 

처음에는 forEach문 안에 if, else문으로 조건식을 짰는데, else문에서 타이틀이 다른 값들에도 forEach문을 돌아서 그런지 버튼을 클릭할 때마다 로컬 스토리지 안에 값이 여러 번 저장됐다. forEach문의 작동 원리를 아직 정확히 파악 못했기 때문에 이상한 방향으로 코드를 작성한 것이다. 또한 forEach문 안의 if문에서 타이틀이 같을 경우, 타이틀이 같은 객체의 num만 변화시키고 로컬 스토리지에서 가져온 기존 값을 다시 set 해야 한다. 그 과정을 어떻게 할지도 아직 생각하지 못했다.

 

시간이 걸리더라도 반.드.시. 저 구간을 채워서 완성시키겠다. I'll be back.

 

 

 

Object key, value 이름 같을 때 꿀팁

let fruits = 'strawberry'
let color = 'pink'

let testArr = [{fruits: fruits, color: color}];
// 이처럼 따옴표를 쓰지 않아도 Key, value를 구분해서 대입

let testArr = [{fruits, color}]
// key와 value의 이름이 같으면 이렇게 요약해서 쓸 수 있음

 

 

자료 출처

코딩애플 JavaScript 강의 中 localStorage 응용 숙제

 

JavaScript 입문과 웹 UI개발 - 코딩애플 온라인 강좌