Comment implémenter la fonction de panier d'achat en utilisant js+cookie-js tutoriel-php.cn

Comment implémenter la fonction de panier d'achat en utilisant js+cookie

亚连

Libérer： 2018-06-19 12:03:53

original

3161 Les gens l'ont consulté

Cet article présente principalement la méthode de mise en œuvre de la fonction de panier avec natif js+cookie, et analyse les techniques de fonctionnement associées de javascript combinées au stockage de cookies pour mettre en œuvre la fonction de panier sous forme d'exemples. Les amis dans le besoin peuvent se référer. à cela

L'exemple de cet article décrit la méthode d'implémentation de la fonction panier avec js+cookie natif. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Ici, nous utilisons js+cookie pour implémenter une fonction simple de panier d'achat.

La première est une structure HTML simple, juste pour démontrer la fonction.

<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>

Copier après la connexion

Le code suivant consiste à ajouter des informations sur le produit aux cookies lorsque vous cliquez sur le bouton d'ajout. Les commentaires sont plus détaillés dans le code, j'encapsule l'opération de cookie (définir et obtenir en tant que méthodes des objets cookieUtil). pour appeler facilement) .

<script>
    //JSON.parse
    //JSON.stringify
    onload = function () {
      var input = document.getElementsByTagName("input");
      //判断是否存在cookie，或是第一次添加
      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;
          //遍历cookie，判断是否已经存在该商品
          for (var i = 0; i < arr.length; i++) {
            if (arr[i].g_id == g_id) {
              //已经存在该商品，商品数量+1
              arr[i].num++;
              break;//立即结束遍历
            }
          }
          //如果i的值与arr长度相同，则证明遍历结束也没有进入过if条件语句，
          //cookie中不存在该商品,新建一个商品对象，并添加到数组中
          if (i == arr.length) {
            var goods = {
              "g_id" : g_id,
              "g_name" : g_name,
              "g_price" : g_price,
              num : 1
            }
            arr.push(goods);
          }
          //把更新后的数组序列化为JSON字符串，保存到cookie中
          var date = new Date();
          date.setDate(date.getDate() + 10); //保存十天
  //保存cookie
  cookieUtil.setCookie("car", JSON.stringify(arr), date); 
        }
      }
    }
</script>

Copier après la connexion

Voici l'objet cookieUtil encapsulé

//cookie Util
var cookieUtil = {
  //添加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;
  },
  //获取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;
  },
  //删除cookie
  unsetCookie: function (name) {
    document.cookie = encodeURIComponent(name) + "=; expires=" + 
new Date(0);
  }
};

Copier après la connexion

Le code ci-dessus est très facile à comprendre. La page suivante consiste à extraire les informations sur le produit dans le cookie.

<!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);
        //存在cookie则取出来显示到页面上
        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>

Copier après la connexion

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.