Native JavaScript+Analysis of the Method to Implement Shopping Cart Functionality with Cookie

This article describes a native js+Methods to implement shopping cart functionality with cookies. Shared for reference, as follows:

Here we use js+Simple shopping cart functionality implemented with cookies.

This is a simple HTML structure, just for demonstration purposes.

<ul>
  <li><span>a0001</span><span>shdfi/span><span>￥98.00</span>
<input type="button" value="Add to Shopping Cart"></li>
  <li><span>a0002</span><span>fbvfgdb/span><span>￥698.00</span>
<input type="button" value="Add to Shopping Cart"></li>
  <li><span>a0003</span><span>dfdfi/span><span>￥988.00</span>
<input type="button" value="Add to Shopping Cart"></li>
  <li><span>a0004</span><span>sssi/span><span>￥998.00</span>
<input type="button" value="Add to Shopping Cart"></li>
  <li><span>a0005</span><span>yyu/span><span>￥98.00</span>
<input type="button" value="Add to Shopping Cart"></li>
  <li><span>a0006</span><span>sheri/span><span>￥598.00</span>
<input type="button" value="Add to Shopping Cart"></li>
  <li><span>a0007</span><span>dsfcdhdfi/span><span>￥498.00</span>
<input type="button" value="Add to Shopping Cart"></li>
  <li><span>sbnm,</span>/span><span>￥698.00</span><input type="button" value="Add
Add to Shopping Cart></li>
</ul>
<a href="shopping_cart_view.html" rel="external nofollow">View Shopping Cart</a>/a>

The following code adds product information to the cookie when the click add button, with detailed comments. In the code, I encapsulate the operation of cookies (set and get) as methods of the cookieUtil object for easy access).

<script>
    //JSON.parse
    //JSON.stringify
    onload = function () {
      var input = document.getElementsByTagName("input");
      //Determine if the cookie exists or if it is the first time to add
      var arr = cookieUtil.getCookie("car") ? 
JSON.parse(cookieUtil.getCookie("car")) : [];
      //Traverse and add click events to each input element
      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;
          //Traverse the cookie to determine if the product already exists
          for (var i = 0; i < arr.length; i++) {
            if (arr[i].g_id == g_id) {
              //The product already exists, the product quantity+1
              arr[i].num++;
              break;//Immediately end the traversal
            }
          }
          //If the value of i is equal to the length of arr, it means that the traversal has ended without entering the if condition statement,
          //The product does not exist in the cookie, create a new product object and add it to the array
          if (i == arr.length) {
            var goods = {
              "g_id" : g_id,
              "g_name" : g_name,
              "g_price" : g_price,
              num : 1
            }
            arr.push(goods);
          }
          //Serialize the updated array to a JSON string and save it to the cookie
          var date = new Date();
          date.setDate(date.getDate()); + 10); //Save for ten days
  //Save cookie
  cookieUtil.setCookie("car", JSON.stringify(arr), date); 
        }
      }
    }
</script>

This is the encapsulated cookieUtil object

//Cookie Util
var cookieUtil = {
  //Add cookie
  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;
  },
  //Get cookie
  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;
  },
  //Delete cookie
  unsetCookie: function (name) {
    document.cookie = encodeURIComponent(name); + "=; expires=" + 
new Date(0);
  }
};

The above code is very easy to understand, the following page is to extract product information from the cookie.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">-8">
  <title>View Shopping Cart Page</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);
        //If there is a cookie, it will be retrieved and displayed on the page
        for (var i = 0; i < arr.length; i++) {
          //Each array element corresponds to a product object
          var goods = arr[i];
          var li = document.createElement("li");
          li.innerHTML = "Item name:" + goods.g_name + ", number of items"
quantity" + goods.num + ", item price:" + goods.g_price;
          ul.appendChild(li);
        }
      } else {
        alert("There are no items in the shopping cart!");
      }
    }
  </script>
</head>
<body>
<ul></ul>
</body>
</html>

Readers who are interested in more JavaScript-related content can check out the special topics on this site: 'Summary of JavaScript Data Structures and Algorithm Techniques', 'Summary of JavaScript Traversal Algorithms and Techniques', 'Summary of JavaScript Search Algorithm Techniques', 'Summary of JavaScript Animation Effects and Techniques', 'Summary of JavaScript Error and Debugging Techniques', and 'Summary of JavaScript Mathematical Operation Usage'.

I hope this article will be helpful to everyone in designing JavaScript programs.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report any infringement by sending an email to notice#w (replace # with @ in the email address), and provide relevant evidence. Once verified, this site will immediately delete the infringing content.