本文实例为大家分享了js实现购物车功能的具体代码，供大家参考，具体内容如下
购物车实现3种方式
1、利用cookie
优点：不占用服务器资源，可以永远保存，不用考虑失效的问题 缺点： 对购买商品的数量是有限制的，存放数据的大小 不可以超过2k，用户如果禁用cookie那么就木有办法购买商品，卓越网实现了用户当用户禁用cookie，也可以购买。
2、利用 session
优点：用户禁用cookie，也可以购物 缺点：占用服务器资源，要考虑session失效的问题
3、利用数据库
优点：可以记录用户的购买行为，便于数据分析用户的喜好，推荐商品 缺点：给数据库造成太大的压力，如果数据量很大的话。
购物车需求分析
1、可以添加商品到购物车中
2、可以删除购物车中的商品
3、可以清空购物车
4、可以更新购物车的商品
5、可以结算
js代码
- 购物车操作模块
-
*/
//商品类
/***
- @name item
- @example
item(sku,name,price,quantity) - @params {string} sku 商品的标示
- @params {string} name 商品的名字
- @param {number} price 商品的价格
- @param {number} quantity 商品的数量
*/
function item(sku,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){ //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>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){ //更新商品的<a href="https://www.jb51.cc/tag/shuliang/" target="_blank" class="keywords">数量</a>
//更新一个商品
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(){
//点击结算后的回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>
if(options.callback){
options.callback();
}
},getTotalCount: function(sku){
//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>购物车商品的<a href="https://www.jb51.cc/tag/shuliang/" target="_blank" class="keywords">数量</a>，如果传某个商品的id，那么就返回该商品的<a href="https://www.jb51.cc/tag/shuliang/" target="_blank" class="keywords">数量</a>
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){
//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>购物车商品的总价格,如果传某个商品的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);