원시 js+cookie를 사용한 쇼핑 카트 기능 구현 방법 분석

이 문서는 원시 js+cookie를 사용하여 구매카트 기능을 구현하는 방법을 공유합니다. 참고용으로 다음과 같습니다:

여기서는 js를 사용합니다+cookie를 사용하여 간단한 구매카트 기능을 구현합니다.

최초는 간단한 HTML 구조입니다. 기능을 보여주기 위해 사용되었습니다.

<ul>
  <li><span>a0001</span><span>shdfi</span><span>￥98.00</span>
<input type="button" value="구매카트에 추가"></li>
  <li><span>a0002</span><span>fbvfgdb</span><span>￥698.00</span>
<input type="button" value="구매카트에 추가"></li>
  <li><span>a0003</span><span>dfdfi</span><span>￥988.00</span>
<input type="button" value="구매카트에 추가"></li>
  <li><span>a0004</span><span>sssi</span><span>￥998.00</span>
<input type="button" value="구매카트에 추가"></li>
  <li><span>a0005</span><span>yyu</span><span>￥98.00</span>
<input type="button" value="구매카트에 추가"></li>
  <li><span>a0006</span><span>sheri</span><span>￥598.00</span>
<input type="button" value="구매카트에 추가"></li>
  <li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span>
<input type="button" value="구매카트에 추가"></li>
  <li><span>sbnm,</span><span>￥698.00</span><input type="button" value="추가
구매카트에 추가></li>
</ul>
<a href="购物车查看页面.html" rel="external nofollow" >쇼핑카 확인 페이지</a>

아래 코드는 클릭 추가 버튼을 클릭할 때 상품 정보를 쿠키에 추가하는 코드입니다. 주석이 상세하게 설명되어 있습니다. 코드에서는 쿠키를操作하는(set과 get)을 cookieUtil 객체의 메서드로 포장하여 쉽게 호출할 수 있도록 했습니다.

<script>
    //JSON.parse
    //JSON.stringify
    onload = function () {
      var input = document.getElementsByTagName("input");
      //쿠키가 존재하는지 확인하거나 첫 번째 추가
      var arr = cookieUtil.getCookie("car") ? 
JSON.parse(cookieUtil.getCookie("car")) : [];
      //각 input 요소에 클릭 이벤트를 추가합니다
      for (var j = 0; j < input.length; j++) {
        input[j].onclick = function () {
          var g_id = this.parentNode.children[0].innerHTML;
          var g_name = this.parentNode.children[1].innerHTML;
          var g_price = this.parentNode.children[2].innerHTML;
          //쿠키를 순회하며 해당 상품이 이미 존재하는지 확인합니다
          for (var i = 0; i < arr.length; i++) {
            if (arr[i].g_id == g_id) {
              //이미 존재하는 상품, 상품 수량+1
              arr[i].num++;
              break;//즉시 루프를 종료합니다
            }
          }
          //i의 값이 arr 길이와 같다면, 루프가 끝났음을 의미하며 if 조건문에 들어갔던 적이 없습니다.
          //쿠키에 해당 상품이 없습니다. 새로운 상품 객체를 생성하고 배열에 추가합니다
          if (i == arr.length) {
            var goods = {
              "g_id" : g_id,
              "g_name" : g_name,
              "g_price" : g_price,
              num : 1
            }
            arr.push(goods);
          }
          //업데이트된 배열을 JSON 문자열로 시리얼라이즈하여 쿠키에 저장합니다
          var date = new Date();
          date.setDate(date.getDate()); + 10); //10일 저장
  //쿠키 저장
  cookieUtil.setCookie("car", JSON.stringify(arr), date); 
        }
      }
    }
</script>

이곳은 포장된 cookieUtil 객체입니다.

//쿠키 유틸
var cookieUtil = {
  //쿠키 추가
  setCookie: function (name, value, expires) {
    var cookieText = encodeURIComponent(name); + "=" + 
encodeURIComponent(value);
    if (expires && expires instanceof Date) {
      cookieText += "; expires=" + expires;
    }
    // if (domain) {
    //   cookieText += "; domain=" + domain;
    // }
    document.cookie = cookieText;
  },
  //쿠키 가져오기
  getCookie: function (name) {
    var cookieText = decodeURIComponent(document.cookie);
    var cookieArr = cookieText.split("; ");
    for (var i = 0; i < cookieArr.length; i++) {
      var arr = cookieArr[i].split("=");
      if (arr[0] == name) {
        return arr[1];
      }
    }
    return null;
  },
  //쿠키 지우기
  unsetCookie: function (name) {
    document.cookie = encodeURIComponent(name); + "=; expires=" + 
new Date(0);
  }
};

위의 코드는 매우 이해하기 쉽습니다. 아래 페이지는 쿠키에 저장된 상품 정보를 꺼내는 페이지입니다.

!DOCTYPE html
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>查看购物车页面</title>
  <script src="../Utils.js"></script>
  <script>
    onload = function () {
      var ul = document.getElementsByTagName("ul")[0];
      var arr = cookieUtil.getCookie("car");
      if (arr) {
        arr = JSON.parse(arr);
        //쿠키가 존재하면 페이지에 표시합니다
        for (var i = 0; i < arr.length; i++) {
          //각 배열 요소는 상품 객체와 일치합니다
          var goods = arr[i];
          var li = document.createElement("li");
          li.innerHTML = "상품 이름:" + goods.g_name + "，상품 수"
개" + goods.num + "，상품 단가:" + goods.g_price;
          ul.appendChild(li);
        }
      } else {
        alert("장바구니에 상품이 없습니다!");
      }
    }
  </script>
</head>
<body>
<ul></ul>
</body>
</html>

JavaScript 관련 내용에 대해 더 알고 싶은 독자분들은 사이트의 특辑을 확인하시기 바랍니다.：《JavaScript 데이터 구조 및 알고리즘 기술 요약》、《JavaScript 탐색 알고리즘 및 기술 요약》、《JavaScript 검색 알고리즘 기술 요약》、《JavaScript 애니메이션 및 기술 요약》、《JavaScript 오류 및 디버깅 기술 요약》 및 《JavaScript 수학 연산 사용 요약》

본 문서에서 설명된 내용이 여러분의 JavaScript 프로그램 설계에 도움이 되길 바랍니다.

성명: 본문은 인터넷에서 수집되었으며, 저작권은 원저자에게 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해가 의심되는 내용을 발견하시면, notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com에 이메일을 보내면(#을 @으로 변경하세요) 신고하시고 관련 증거를 제공해 주시면, 사이트가 저작권 침해 내용을 즉시 삭제할 것입니다.

기본 튜토리얼

추천해드립니다