javascript 实现购物车
购物车实现3种方式
1、利用cookie
优点：不占用服务器资源，可以永远保存，不用考虑失效的问题
缺点： 对购买商品的数量是有限制的，存放数据的大小 不可以超过2k，用户如果禁用cookie那么就木有办法购买商品，卓越网实现了用户当用户禁用cookie，也可以购买。
2、利用 session
优点：用户禁用cookie，也可以购物
缺点：占用服务器资源，要考虑session失效的问题
3、利用数据库
优点：可以记录用户的购买行为，便于数据分析用户的喜好，推荐商品
缺点：给数据库造成太大的压力，如果数据量很大的话。
购物车需求分析
1、可以添加商品到购物车中
2、可以删除购物车中的商品
3、可以清空购物车
4、可以更新购物车的商品
5、可以结算
/*** * 购物车操作模块 * */var shopCart = function(window){"use strict";//全局变量var items = [],cartName='kuaidian_shop_cart',expires = new Date("2020-12-23"),debug = true,decimal = 2;var options = {'cartName' : cartName, //cookie的名字'expires' : expires, //cookie失效的时间'debug' : debug, //是否打印调试信息'decimal' : decimal, //钱的精确到小数点后的位数'callback' : undefined};//商品类/*** * @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;}//暴露给外部的接口方法return {inited : false,init: function(option){//判断用户是否禁用cookieif(!window.navigator.cookieEnabled ){alert('您的浏览器不支持cookie无法使用购物车！,请设置允许设置cookie。');return false;}//从cookie中获取购物车中的数据this.inited = true;option = option || {};extend(options,option);if(getCookie(options.cartName) == ''){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,则返回所有的itemif(sku){for(var i=0,l=items.length;i<l;i++){var item = items[i];if(item.sku == sku){return item;}}}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;}}//木有找到返回-1return -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 = 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 null;};//***********************私有方法********************/function _saveCookie(){var i=0,l=items.length;if(l>0){for(;i<l;i++){var item = items[i];items[i] = item.sku + '|' +item.name + '|' + item.price + '|' + item.quantity;};var str = items.join('&');setCookie(options.cartName, str, {expires:options.expires});}else{setCookie(options.cartName, '', {expires:options.expires});}};//***********************工具方法********************///显示调试信息function _log(info){if(console){console.log(info);}};//继承属性function extend(destination, source) {for ( var property in source) {destination[property] = source[property];}};}(typeof window === 'undifined' ? this: window); shopCart.init({'decimal' : 4 }); shopCart.addItem(item); //添加商品到购物车shopCart.delItem('12345'); //从购物车中删除商品shopCart.emptyCart(); //清空购物车item.quantity = 4; alert(shopCart.getTotalPrice()); //获取购物车中的数量