/* 单例设计模式 完整形式：[]中是可选项 document.cookie = “name=value[;expires=date][;path=path-to-resource][;domain=域名][;secure]” */ var cookieObj = { /* 增加或修改cookie 参数：o 对象{} name:string cookie名 value:string cookie值 expires:Date对象 过期时间 path:string 路径限制 domain:string 域名限制 secure:boolean true https false或undeinfed */ set: function(o) { var cookieStr = encodeURIComponent(o.name) + "=" + encodeURIComponent(o.value); if(o.expires) { cookieStr += ";expires=" + o.expires; } if(o.path) { cookieStr += ";path=" + o.path; } if(o.domain) { cookieStr += ";domain=" + o.domain; } if(o.secure) { cookieStr += ";secure"; } document.cookie = cookieStr; }, /* 删除 参数：n string cookie的名字 */ del: function(n) { var date = new Date(); date.setHours(-1); //this代表的是当前函数的对象 this.set({ name: n, expires: date }); }, /*查找*/ get: function(n) { n = encodeURIComponent(n); var cooikeTotal = document.cookie; var cookies = cooikeTotal.split("; "); for(var i = 0, len = cookies.length; i < len; i++) { var arr = cookies[i].split("="); if(n == arr[0]) { return decodeURIComponent(arr[1]); } } } }
下面的是server.js代码，主要对购物车中各种操作进行了封装，比如商品个数统计，更新获取本地数据等操作，方便代码管理，请看代码：
/* 功能：查看本地数据中是否含有指定的对象（商品），根据id 参数：id：商品的标识 */ function checkObjByPid(id) { var jsonStr = cookieObj.get("datas"); var jsonObj = JSON.parse(jsonStr); var isExist = false; for(var i = 0, len = jsonObj.length; i < len; i++) { if(jsonObj[i].pid == id) { isExist = true; break; } } return isExist; //return false; } /* 功能：更新本地数据 参数：arr 数组对象 返回一个值：最新的本地转换后的数组对象 * */ function updateData(arr) { var jsonStr = JSON.stringify(arr); cookieObj.set({ name: "datas", value: jsonStr }); jsonStr = cookieObj.get("datas"); return JSON.parse(jsonStr); } /* 获取商品的总数量 返回：数字 */ function getTotalCount() { /*循环遍历数组，获取每一个对象中的pCount值相加总和*/ var totalCount = 0; //默认为0 var jsonStr = cookieObj.get("datas"); var listObj = JSON.parse(jsonStr); for(var i = 0, len = listObj.length; i < len; i++) { totalCount = listObj[i].pCount + totalCount; } return totalCount; } /* 更新本地数据根据pid id:商品的标识 */ function updateObjById(id, num) { var jsonStr = cookieObj.get("datas"); var listObj = JSON.parse(jsonStr); for(var i = 0, len = listObj.length; i < len; i++) { if(listObj[i].pid == id) { listObj[i].pCount = listObj[i].pCount + num; break; } } return updateData(listObj) } /* 获取本地数据 返回 数组对象 * */ function getAllData() { var jsonStr = cookieObj.get("datas"); var listObj = JSON.parse(jsonStr); return listObj; } function deleteObjByPid(id) { var lisObj = getAllData(); for(var i = 0, len = lisObj.length; i < len; i++) { if(lisObj[i].pid == id) { lisObj.splice(i, 1); break; } } updateData(lisObj); return lisObj; }
因为上述代码中涉及了进入购物车后的一些操作，读者看了之后可能会感动疑惑，不用担心，下面请看点击进入我的购物车之后的分析。
请看效果图：
笔者在主页中点击了三种商品，共点击了七次，在购物车中出现了相应商品以及价格计算。对于途中的各种信息，相信读者一目了然。请看本购物车的html代码：