js实现购物车功能

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

购物车实现3种方式

1、利用cookie

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

2、利用 session

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

3、利用数据库

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

购物车需求分析

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

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

3、可以清空购物车

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

5、可以结算

js代码

//商品类

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 -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;i0){
      var tItems = [];
      for(;i

HTML页面简单调用






  
  




  

  





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