localStorage 에서 setItem 부분

[최연진]

안녕하세요 선생님!

1. 아래 사진에서  localStorage.setItem('cart', JSON.stringify([title]));}
이부분을 위에서가 아닌 else부분에 먼저 써서 'cart'라는걸 만들어줬는데요
이부분에서 처음에 작동하는건 else 라서 cart를 기억하고  if의 조건식에
cart부분에서 getItem을 해서 비교를 할 수 있는건가요?

따로 위에서 setItem으로 cart를 하지 않았는데 cart라는걸 기억하는 순서에
대해 궁금해서 질문드립니다! 

2. 그리고 하고나면 밑에 버튼들 누르고(2번째 사진에 있는 많은 버튼들)
다시 주문하기 버튼 누르면
localStorage에 저장이 안됩니다.
이부분 전강의에서 event가 발생할때 페이지가 초기화되서 그런다고 
기억하고있는데 다른 버튼 눌러서 그 버튼의 조건에 맞게 
변했을때도 (버튼눌러서 이벤트가 발생하고 다시 페이지 돌아올시 )
똑같이 주문하기 눌러서 localStorage부분에 저장하고 싶으면 코드를 어떤식으로
적용해야하나요?

[codingapple]

1은 처음실행시 else문 실행되어서 cart라는 항목이 로컬스토리지에 저장잘될듯요 
버튼누를 때 기존 html을 지웠다가 다시 생성하는거면 이벤트리스너도 다시 부착하면 됩니다

[최연진]

html요소를 지우고 다시 추가한게 맞는데 이벤트 리스너 추가를 어디부분에다가
해야하는지 이해하지 못해서 질문 드립니다,,,!

[최연진]

버튼누를 때 기존 html을 지웠다가 다시 생성하는거면 이벤트리스너도 
다시 부착하면 됩니다""
이부분이 이해가 안가서 다시 질문드립니다
이벤트 리스너를 다시 코드를 작성해서 붙이라는 말씀 맞으실까요??!
이부분 자세히 설명 부탁드립니다 ㅠㅠ!

코드는
html

<div class="card-group container"></div>

 <div class="container my-3">
      <button class="btn btn-danger" id="price">가격순 정렬</button>
    </div>

    <div class="container my-3">
      <button class="btn btn-danger" id="nameArray">이름 반대로 정렬</button>
    </div>

    <div class="container my-3">
      <button class="btn btn-danger" id="nameA">이름 원래대로 정렬</button>
    </div>

    <div class="container my-3">
      <button class="btn btn-danger" id="Down">60000원 이하</button>
    </div>

      <div class="container my-3">
      <button class="btn btn-danger" id="replay">원래대로</button>
    </div>

    <div class="container my-3">
      <button class="btn btn-danger" id="more">더보기</button>
    </div>

    <form>
      가격 : <input type="text" id="priceText" style="margin-bottom: 20px;">
    </form>

------------------------------------------------------------
script

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

     let obj = [...products];
     let container = document.querySelector(".container");
     let priceArray = document.querySelector("#price");

     /*재사용 함수*/
      function temple(products) {
        products.forEach((a, i) => {
          var templet = `<div class="col-sm-4">
        < img src="https://via.placeholder.com/600" />
        <div class="card-body">
          <h5>${products[i].title}</h5>
          <p>가격 : <span>${products[i].price}</span></p>
          <button class="btn btn-danger buy">주문하기</button>
        </div>`;
          container.insertAdjacentHTML("beforeend", templet);
        });
      }

      //초기에 뜨는 아이템3개
      temple(products);

     //price버튼 누르면 products 가격내림차순 정렬
      priceArray.addEventListener("click", function () {
        products.sort(function (a, b) {
          return a.price - b.price;
      });
        container.innerHTML = "";
        temple(products);//재사용함수 
      });

  // 상품명 다나가순으로 정렬(반대로 정렬)
      document
        .querySelector("#nameArray")
        .addEventListener("click", function () {
          products.sort(function (a, b) {
            const upperCaseA = a.title.toUpperCase();
            const upperCaseB = b.title.toUpperCase();

            if (upperCaseA < upperCaseB) return 1;
            if (upperCaseA === upperCaseB) return 0;
            if (upperCaseA > upperCaseB) return -1;
          });

          container.innerHTML = "";
          temple(products);//재사용함수 
        });

  // 상품명 가나다순으로 정렬(원래대로 정렬)
      document.querySelector("#nameA").addEventListener("click", function () {
        products.sort(function (a, b) {
          const upperCaseA = a.title.toUpperCase();
          const upperCaseB = b.title.toUpperCase();

          if (upperCaseA > upperCaseB) return 1;
          if (upperCaseA === upperCaseB) return 0;
          if (upperCaseA < upperCaseB) return -1;
        });

        container.innerHTML = "";
        temple(products);
      });

    //60000원 이하상품 필터로 처리
      document.querySelector("#Down").addEventListener("click", function () {
        var abc = products.filter(function (memory) {
          return memory.price <= 60000;
        });
        container.innerHTML = ""; //HTML요소 비움
        abc.forEach((a, i) => {
          var templet = `<div class="col-sm-4">
        < img src="https://via.placeholder.com/600" />
        <div class="card-body">
          <h5>${abc[i].title}</h5>
          <p>가격 : <span>${abc[i].price}</span></p>
          <button class="btn btn-danger buy">주문하기</button>
        </div>`;
          container.insertAdjacentHTML("beforeend", templet);
        });
      });

  //input에 입력하면 그 가격 아이템 뜨게함
      document.querySelector('form > #priceText').addEventListener('input', function(){
      let valuePrice = document.querySelector('form > #priceText').value;
        var values = products.filter(function (memory) {
          return memory.price == valuePrice;
        });
        container.innerHTML = "";
        values.forEach((a, i) => {
          var templet = `<div class="col-sm-4">
        < img src="https://via.placeholder.com/600" />
        <div class="card-body">
          <h5>${values[i].title}</h5>
          <p>가격 : <span>${values[i].price}</span></p>
          <button class="btn btn-danger buy">주문하기</button>
        </div>`;
          container.insertAdjacentHTML("beforeend", templet);
        });
        })

    //맨처음상태로 돌리기
        document.querySelector('#replay').addEventListener('click', function(){

          container.innerHTML ='';
            obj.forEach((a, i) => {
          var templet = `<div class="col-sm-4">
        < img src="https://via.placeholder.com/600" />
        <div class="card-body">
          <h5>${obj[i].title}</h5>
          <p>가격 : <span>${obj[i].price}</span></p>
          <button class="btn btn-danger buy">주문하기</button>
        </div>`;
          container.insertAdjacentHTML("beforeend", templet);
      });
        });

[codingapple]

반복문으로 var templet 생성하는곳 밑에다가
주문하기 버튼 누르면 상품추가하는 기능 실행하라고 코드추가합시다

[글쓴이]

글