js实现购物车功能

本文实例为大家分享了js实现购物车功能的具体代码，供大家参考，具体内容如下

购物车实现3种方式

1、利用cookie

优点：不占用服务器资源，可以永远保存，不用考虑失效的问题
缺点： 对购买商品的数量是有限制的，存放数据的大小 不可以超过2k，用户如果禁用cookie那么就木有办法购买商品，卓越网实现了用户当用户禁用cookie，也可以购买。

2、利用 session

优点：用户禁用cookie，也可以购物
缺点：占用服务器资源，要考虑session失效的问题

3、利用数据库

优点：可以记录用户的购买行为，便于数据分析用户的喜好，推荐商品
缺点：给数据库造成太大的压力，如果数据量很大的话。

购物车需求分析

1、可以添加商品到购物车中

2、可以删除购物车中的商品

3、可以清空购物车

4、可以更新购物车的商品

5、可以结算

js代码

/**
 * Created by Administrator on 2017/9/3.
 */


/***
 * 购物车操作模块
 *
 */

//商品类
/***
 * @name item
 * @example
  item(sku, name, price, quantity)
 * @params {string} sku 商品的标示
 * @params {string} name 商品的名字
 * @param {number} price 商品的价格
 * @param {number} quantity 商品的数量
 */
function item(sku, name, price, quantity){
  this.sku = sku;
  this.name = name;
  this.price = price;
  this.quantity = quantity;
}

var shopCart = function(window){

  \"use strict\";
  //全局变量
  // note new new Date(\"2020-12-23\") 在ie下面报错，不支持这样的语法
  var items = [],cartName=\'kuaidian_shop_cart\',expires = new Date( new Date().getTime()+86400000*30 )
  ,debug = true,decimal = 2;
  var options = {
    \'cartName\' : cartName, //cookie的名字
    \'expires\' : expires, //cookie失效的时间
    \'debug\' : debug, //是否打印调试信息
    \'decimal\' : decimal, //钱的精确到小数点后的位数
    \'callback\' : undefined
  };


  //暴露给外部的接口方法
  return {
    inited : false,
    init: function(option){
      //判断用户是否禁用cookie
      if(!window.navigator.cookieEnabled ){
        alert(\'您的浏览器不支持cookie无法使用购物车！,请设置允许设置cookie。\');
        return false;
      }
      //从cookie中获取购物车中的数据
      this.inited = true;
      if(option){
        extend(options,option);
      }
      var cookie = getCookie(options.cartName);
      if(typeof cookie === \'undefined\'){
        setCookie(options.cartName,\'\',options.expires);
      }else{
        //每个item之间用&分开，item的属性之间用|分割
        var cookie = getCookie(options.cartName);
        if(cookie){
          var cItems = cookie.split(\'&\');
          for(var i=0,l=cItems.length;i<l;i++){
            var cItem = cItems[i].split(\'|\');
              var item = {};
              item.sku = cItem[0] || \'\';
              item.name = cItem[1] || \'\';
              item.price = cItem[2] || \'\';
              item.quantity = cItem[3] || \'\';
              items.push(item);
          };
        };

      };
    },
    findItem: function(sku){//根据sku标示查找商品
      //如果木有提供sku,则返回所有的item
      if(sku){
        for(var i=0,l=items.length;i<l;i++){
          var item = items[i];
          if(item.sku === sku){
            return item;
          }
        }
        return undefined;
      }else{
        return items;
      }

    },
    getItemIndex : function(sku){ //获取item在items的数组下标
      for(var i=0,l=items.length;i<l;i++){
        var item = items[i];
        if(item.sku == sku){
          return i;
        }
      }
      //木有找到返回-1
      return -1;
    },
    addItem: function(item){ //增加一个新商品到购物车
      //添加一个商品
      if(this.findItem(item.sku)){
        if(options.debug){
          _log(\'商品已经存在了\');
          return false;
        }
      }
      items.push(item);
      _saveCookie();
      return true;
    },
    delItem: function(sku){ //从购物车中删除一个商品
      //删除一个商品
      var index = this.getItemIndex(sku);
      if(index > -1){
        items.splice(index,1);
        _saveCookie();
      }else{
        if(options.debug){
          _log(\'商品不存在\');
          return false;
        }
      }
    },
    updateQuantity: function(item){ //更新商品的数量
      //更新一个商品
      var index = this.getItemIndex(item.sku);
      if(index > -1){
        items[index].quantity = item.quantity;
        _saveCookie();
      }else{
        if(options.debug){
          _log(\'商品不存在\');
          return false;
        }
      }
    },
    emptyCart: function(){
      //清空数组
      items.length = 0;
      _saveCookie();
    },
    checkout: function(){
      //点击结算后的回调函数
      if(options.callback){
        options.callback();
      }
    },
    getTotalCount: function(sku){
      //获取购物车商品的数量，如果传某个商品的id，那么就返回该商品的数量
      var totalCount = 0;
      if(sku){
        totalCount = (typeof this.findItem(sku) === \'undefined\' ? 0 : this.findItem(sku).quantity );
      }else{
        for(var i=0,l=items.length;i<l;i++){
          totalCount += (parseInt(items[i].quantity) === \'NaN\' ? 0 : parseInt(items[i].quantity )) ;
        }
      }
      return totalCount;
    },
    getTotalPrice : function(sku){
      //获取购物车商品的总价格 ,如果传某个商品的id，那么就返回该商品的总价格
      var totalPrice = 0.0;
      if(sku){
        var num = parseInt((typeof this.findItem(sku) === \'undefined\' ? 0 : this.findItem(sku).quantity )),
        price = parseFloat((typeof this.findItem(sku) === \'undefined\' ? 0 : this.findItem(sku).price ));
        num = num=== \'NaN\' ? 0 : num;
        price = price === \'NaN\' ? 0 : price;
        totalPrice = price * num;
      }else{
        for(var i=0,l=items.length;i<l;i++){
          totalPrice += (parseFloat(items[i].price ) * parseInt(items[i].quantity));
        }
      }
      return totalPrice.toFixed(options.decimal);
    },
    getCookie : getCookie,
    setCookie : setCookie
  };


  /**
   * 设置cookie
   * @name setCookie
   * @example
    setCookie(name, value[, options])
   * @params {string} name 需要设置Cookie的键名
   * @params {string} value 需要设置Cookie的值
   * @params {string} [path] cookie路径
   * @params {Date} [expires] cookie过期时间
   */
  function setCookie(name, value, options) {
    options = options || {};
    var expires = options.expires || null;
    var path = options.path || \"/\";
    var domain = options.domain || document.domain;
    var secure = options.secure || null;
    /**
    document.cookie = name + \"=\" + escape(value)
    + ((expires) ? \"; expires=\" + expires.toGMTString() : \"\")
    + \"; path=\" + path
    + \"; domain=\" + domain ;
    + ((secure) ? \"; secure\" : \"\");
    */
    var str = name + \"=\" + encodeURIComponent(value)
    + ((expires) ? \"; expires=\" + expires.toGMTString() : \"\")
    + \"; path=/\";
    document.cookie = str;
  };

  /**
   * 获取cookie的值
   * @name getCookie
   * @example
    getCookie(name)
   * @param {string} name 需要获取Cookie的键名
   * @return {string|null} 获取的Cookie值，获取不到时返回null
   */
  function getCookie(name) {
    var arr = document.cookie.match(new RegExp(\"(^| )\" + name
        + \"=([^;]*)(;|$)\"));
    if (arr != null) {
      return decodeURIComponent(arr[2]);
    }
    return undefined;
  };

  //***********************私有方法********************/
  function _saveCookie(){
    var i=0,l=items.length;
    if(l>0){
      var tItems = [];
      for(;i<l;i++){
        var item = items[i];
        tItems[i] = item.sku + \'|\' +item.name + \'|\' + item.price + \'|\' + item.quantity;
      };
      var str = tItems.join(\'&\');
      setCookie(options.cartName, str, {expires:options.expires});
    }else{
      setCookie(options.cartName, \'\', {expires:options.expires});
    }

  };

  //***********************工具方法********************/
  //显示调试信息
  function _log(info){
    if(typeof console != \'undefined\'){
      console.log(info);
    }
  };
  //继承属性
  function extend(destination, source) {
    for ( var property in source) {
      destination[property] = source[property];
    }
  };
}(typeof window === \'undifined\' ? this: window);

HTML页面简单调用

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <meta charset=\"UTF-8\">
  <title>Title</title>

</head>
<body>

  <script type=\"text/javascript\" src=\"./shop.js\"></script>

  <script>

    shopCart.init({
      \'decimal\' : 4
      });

    var a = new item(\'aa\',\'bb\',12,22);
    shopCart.addItem(a); //添加商品到购物车,参数item
    shopCart.delItem(\'12345\'); //从购物车中删除商品,参数squ
//    shopCart.emptyCart(); //清空购物车
    item.quantity = 4;
    alert(shopCart.getTotalPrice()); //获取购物车中的数量,参数squ


    shopCart.findItem();//根据sku标示查找商品,参数squ
      //如果木有提供sku,则返回所有的item
    shopCart.getItemIndex(\'aa\') //获取item在items的数组下标,参数squ
    shopCart.updateQuantity(a) //更新商品的数量,参数item
    shopCart.getTotalCount()//获取购物车商品的数量，如果传某个商品的id，那么就返回该商品的数量,参数squ
  </script>

</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。