使用js+cookie如何实现购物车功能-js教程-PHP中文网

这篇文章主要介绍了原生js+cookie实现购物车功能的方法,结合实例形式分析了javascript结合cookie存储实现购物车功能的相关操作技巧,需要的朋友可以参考下

本文实例讲述了原生js+cookie实现购物车功能的方法。分享给大家供大家参考，具体如下：

这里使用js+cookie实现简单的购物车功能。

首先是简单的HTML结构，只是为了演示下功能。

a0001shdfi￥98.00
a0002fbvfgdb￥698.00
a0003dfdfi￥988.00
a0004sssi￥998.00
a0005yyu￥98.00
a0006sheri￥598.00
a0007dsfcdhdfi￥498.00
sbnm,￥698.00

下面的代码是实现点击添加按钮时，把商品信息加入cookie，注释比较详细，在代码中我把操作cookie（set和get封装为cookieUtil对象的方法，方便调用）。

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

这里是封装的cookieUtil对象

//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 <p>上面的代码都非常好理解，下面这个页面就是把cookie中的商品信息取出来。</p><pre class="brush:php;toolbar:false;">html>


  <meta>
  <title>查看购物车页面</title>
  <script></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>

上面是我整理给大家的，希望今后会对大家有帮助。