[javascript] 25. localStorage & 장바구니 기능

구매 버튼 클릭하면 해당 상품의 정보 저장하기

확인하기 위하여 구매 버튼 클릭 시 해당 상품의 products.id 를 콘솔에 출력해보았다

정렬 버튼 구현한 이전 포스팅의 코드에서 forEach 로 상품과 인덱스를 받아오도록 했지만 정렬 버튼들을 클릭 한 후 구매 버튼을 클릭하면 원활하게 동작하지 않았다
(첫번째 상품은 세번 연속 출력되기도 하고 어떤 상품은 출력 자체가 되지 않고 등등..)

그래서 전반적으로 수정을 했다

makeCard 함수를 많이 수정하였다
forEach문을 함수 내부로 옮긴 후에 상품카드의 html과 화면에 추가해주는 부분까지 묶었다
그리고 구매버튼을 클릭하면 상품의 title을 출력하도록 했다

그러면 products에 존재하는 상품의 개수대로 html을 만들어준 수 row 태그에 추가해줄 것이다

    <script>
      let products = [
        { id: 0, price: 70000, title: "Blossom Dress" },
        { id: 1, price: 50000, title: "Springfield Shirt" },
        { id: 2, price: 60000, title: "Black Monastery" },
      ];

      function makeCard(products) {
        products.forEach((data) => {
          let cards = `<div class="col-sm-4">
          <img src="https://via.placeholder.com/600" class="w-100" />
          <h5>${data.title}</h5>
          <p>가격 : ${data.price}</p>
         <button class="buy btn btn-secondary mb-3" id="${data.id}">구매</button>
        </div>`;
          $(".row").append(cards);
        });
        //모든 buy 클래스에 이벤트 리스너를 한번에 달아준다
        $(".buy").click((e) => {
          let title = $(e.target).siblings("h5").html();
          console.log(title);

      //첫번째 상품들
      makeCard(products);

      // 두번째,세번째 상품들
      let count = 0;
      $("#more").click(function () {
        count++;
        if (count == 1) {
          url = "https://codingapple1.github.io/js/more1.json";
        } else if (count == 2) {
          url = "https://codingapple1.github.io/js/more2.json";
          $("#more").attr("disabled", true);
        }
        $.get(url).then((moreproducts) => {
          moreproducts.forEach((data) => {
            products.push(data);
          });
          makeCard(moreproducts);
        });
      });

      //가격 오름차순 정렬버튼
      $("#sort").click(function () {
        products.sort((a, b) => {
          return a.price - b.price;
        });
        console.log(products);
        $(".row").html("");
        makeCard(products);
      });
      // 다나가 순 정렬
      $("#word").click(function () {
        products.sort((a, b) => {
          if (a.title < b.title) {
            return 1;
          } else if (a.title == b.title) {
            return 0;
          } else return -1;
        });
        $(".row").html("");
        makeCard(products);
      });

      // 6만원 이하 상품만 보기
      $("#underprice").click(function () {
        products = products.filter((data) => {
          return data.price <= 60000;
        });
        $(".row").html("");
        makeCard(products);
      });
    </script>

기존의 문제들이 해결이 되었고 정렬버튼들을 클릭한 후에도 구매 버튼을 클릭한 상품의 정보가 잘 출력이 되었다 ⬇️

상품 정보 저장

내 코드로 상품 정보를 잘 확인하는지 확인했으니 이제 정보를 저장할 것이다
실제 서비스면 서버로 보냈겠지만 나는 서버가 없다

그러면 변수에 저장할까?

변수는 페이지를 새로고침할 때마다 리셋된다
➡️ 영구적이지 못하다

그래서 이 정보를 반영구적으로 저장하기 위하여 localStorage에 저장하려고 한다

📢 localStorage / Session Storage

웹 스토리지(web storage)에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있다

Local Storage는 브라우저 재접속해도 영구적으로 남아있는데 Session Storage는 브라우저 끄면 날아간다

Local Storage는 유저가 브라우저 청소하지 않는 이상 반영구적으로 데이터 저장이 가능하다

Local Storage 속성

• key 값과 value 값 데이터를 저장 가능
• string(문자열)로 저장
• 5MB 까지만 저장 가능
• 사용 용도: 임시 저장 기능, 장바구니, 서버에 저장할 필요가 없는 경우 등이다.

Local Storage 사용법

//자료저장하는법 (key, value)
localStorage.setItem('이름', 'kim') 
//자료꺼내는법
localStorage.getItem('이름') -> 'kim'
//자료삭제하는법
localStorage.removeItem('이름') 

Local Storage에 array/object 저장하는 방법

localStorage.setItem('num', [1,2,3])

로컬스토리지에 배열/객체 자료를 저장하면 강제로 문자로 바꿔서 저장하게 된다
이렇게 강제로 저장하게 되면 자료형태가 깨질 수 있어서
배열/객체를 문자취급을 해주어야 한다

JSON으로 바꾸기

(JSON은 그냥 따옴표친 array/object)

배열/객체 ➡️ 문자

var arr = [1,2,3];
var newArr = JSON.stringify(arr);
localStorage.setItem('num', newArr)

문자 ➡️ 배열/객체

수정/추가/삭제 등의 작업을 위해서 newArr을 꺼내야 하는데 사용을 하기 위해서는 다시 배열/객체 형태로 바꿔야 한다

var item = localStorage.getItem('num');
item = JSON.parse(item);
console.log(item);

장바구니 구현

이제 앞에서 다룬 localStorage를 이용하여 상품 정보를 저장해볼 것이다

localStorage에 선택한 상품의 title이 저장되도록 해보기

$(".buy").click((e) => {
  let title = $(e.target).siblings("h5").html();
  localStorage.setItem("cart", JSON.stringify([title]));
        });
      }

siblings 메소드로 형제 라인의 h5 값을 가져온다
그리고 title을 배열로 만들고 배열의 형태가 깨지지 않도록 JSON.stringify( )를 이용해 저장한다

하지만 값이 1개만 저장되고 더 추가가 되지는 않았다

이유 : setItem을 이용해 새로 업데이트되는 title 값으로 계속 변경해주기 때문

➡️ 그래서 데이터가 존재할 때와 존재하지 않을 때로 나눠줘야 한다

$(".buy").click((e) => {
          let title = $(e.target).siblings("h5").html();

  		  // cart라는 key가 로컬스토리지에 존재한다면
          if (localStorage.cart) {
            let cartitems = JSON.parse(localStorage.getItem("cart"));
            cartitems.push(title);
            localStorage.setItem("cart", JSON.stringify(cartitems));
            console.log(cartitems);
          } 
   		// 존재하지 않는다면
 		 else {
            localStorage.setItem("cart", JSON.stringify([title])); //요소가 없는 경우 추가
          }
        });

객체로 저장

구매 버튼을 클릭하면 localStorage 에 상품의 title만 문자열 배열로 저장했었지만 해당 상품을 몇번 담았는지도 저장해볼 것이다

array/object 활용

value 값에 title, count값을 만들어서 title이 중복이면 추가되지 않고 해당 title의 count만 증가하도록 하기
ex) [ {title : '상품명a', num : 2}, {title : '상품명b', num : 4} ... ]

$(".buy").click((e) => {
          let title = $(e.target).siblings("h5").html();
          if (localStorage.cart) {
            let cartitems = JSON.parse(localStorage.getItem("cart"));

            let isItem = cartitems.find((item) => item.title == title);

            if (isItem) {
              //존재하면 push로 추가하는 것이 아니라 getItems로 수정해야할 듯
              isItem.count++;
            } else {
              cartitems.push({ title: title, count: 1 });
            }
            localStorage.setItem("cart", JSON.stringify(cartitems));
          } else {
            localStorage.setItem(
              "cart",
              JSON.stringify([{ title: title, count: 1 }])
            );
          }
        });

그리고 장바구니 페이지인 cart.html 을 만들어서 localStorage에 존재하는 상품의 title을 개수대로 p태그를 이용하여 띄워준다

<body>
    <h2>장바구니</h2>
    <div class="cartcard"></div>
    <script>
      let cartcards = JSON.parse(localStorage.getItem("cart"));
      for (i = 0; i < cartcards.length; i++) {
        $(".cartcard").append(`<p>${cartcards[i]}<p>`);
      }
    </script>
  </body>

😎 결과

상품들의 구매 버튼을 클릭하면 localStorage에 title과 count가 저장이 잘 되고

cart.html에도 해당 상품들이 잘 뜬다 !