js实现购物车功能
本文实例为大家分享了js实现购物车功能的具体代码，供大家参考，具体内容如下
购物车实现3种方式
1、利用cookie
优点：不占用服务器资源，可以永远保存，不用考虑失效的问题
缺点：对购买商品的数量是有限制的，存放数据的大小不可以超过2k，用户如果禁用cookie那么就木有办法购买商品，卓越网实现了用户当用户禁用cookie，也可以购买。
2、利用session
优点：用户禁用cookie，也可以购物
缺点：占用服务器资源，要考虑session失效的问题
3、利用数据库
优点：可以记录用户的购买行为，便于数据分析用户的喜好，推荐商品
缺点：给数据库造成太大的压力，如果数据量很大的话。
购物车需求分析
1、可以添加商品到购物车中
2、可以删除购物车中的商品
3、可以清空购物车
4、可以更新购物车的商品
5、可以结算
js代码
/**
*CreatedbyAdministratoron2017/9/3.
*/
/***
*购物车操作模块
*
*/
//商品类
/***
*@nameitem
*@example
item(sku,name,price,quantity)
*@params{string}sku商品的标示
*@params{string}name商品的名字
*@param{number}price商品的价格
*@param{number}quantity商品的数量
*/
functionitem(sku,name,price,quantity){
this.sku=sku;
this.name=name;
this.price=price;
this.quantity=quantity;
}
varshopCart=function(window){
"usestrict";
//全局变量
//notenewnewDate("2020-12-23")在ie下面报错，不支持这样的语法
varitems=[],cartName='kuaidian_shop_cart',expires=newDate(newDate().getTime()+86400000*30)
,debug=true,decimal=2;
varoptions={
'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。');
returnfalse;
}
//从cookie中获取购物车中的数据
this.inited=true;
if(option){
extend(options,option);
}
varcookie=getCookie(options.cartName);
if(typeofcookie==='undefined'){
setCookie(options.cartName,'',options.expires);
}else{
//每个item之间用&分开，item的属性之间用|分割
varcookie=getCookie(options.cartName);
if(cookie){
varcItems=cookie.split('&');
for(vari=0,l=cItems.length;i-1){
items.splice(index,1);
_saveCookie();
}else{
if(options.debug){
_log('商品不存在');
returnfalse;
}
}
},
updateQuantity:function(item){//更新商品的数量
//更新一个商品
varindex=this.getItemIndex(item.sku);
if(index>-1){
items[index].quantity=item.quantity;
_saveCookie();
}else{
if(options.debug){
_log('商品不存在');
returnfalse;
}
}
},
emptyCart:function(){
//清空数组
items.length=0;
_saveCookie();
},
checkout:function(){
//点击结算后的回调函数
if(options.callback){
options.callback();
}
},
getTotalCount:function(sku){
//获取购物车商品的数量，如果传某个商品的id，那么就返回该商品的数量
vartotalCount=0;
if(sku){
totalCount=(typeofthis.findItem(sku)==='undefined'?0:this.findItem(sku).quantity);
}else{
for(vari=0,l=items.length;i0){
vartItems=[];
for(;i
HTML页面简单调用
Title