引入JQuery.js支持
加入JQuery.Cookie.js,代码如下
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 jQuery.cookie = function(name, value, options) { 2 if (typeof value != 'undefined') { // name and value given, set cookie 3 options = options || {}; 4 if (value === null) { 5 value = ''; 6 options.expires = -1; 7 } 8 var expires = ''; 9 if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { 10 var date; 11 if (typeof options.expires == 'number') { 12 date = new Date(); 13 date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); 14 } else { 15 date = options.expires; 16 } 17 expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE 18 } 19 var path = options.path ? '; path=' + options.path : ''; 20 var domain = options.domain ? '; domain=' + options.domain : ''; 21 var secure = options.secure ? '; secure' : ''; 22 document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); 23 } else { // only name given, get cookie 24 var cookieValue = null; 25 if (document.cookie && document.cookie != '') { 26 var cookies = document.cookie.split(';'); 27 for (var i = 0; i < cookies.length; i++) { 28 var cookie = jQuery.trim(cookies[i]); 29 // Does this cookie string begin with the name we want? 30 if (cookie.substring(0, name.length + 1) == (name + '=')) { 31 cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 32 break; 33 } 34 } 35 } 36 return cookieValue; 37 } 38 }; 39 function getcookie(name) { 40 var cookie_start = document.cookie.indexOf(name); 41 var cookie_end = document.cookie.indexOf(";", cookie_start); 42 return cookie_start == -1 ? '' : unescape(document.cookie.substring(cookie_start + name.length + 1, (cookie_end > cookie_start ? cookie_end : document.cookie.length))); 43 } 44 function setcookie(cookieName, cookieValue, seconds, path, domain, secure) { 45 var expires = new Date(); 46 expires.setTime(expires.getTime() + seconds); 47 document.cookie = escape(cookieName) + '=' + escape(cookieValue) 48 + (expires ? '; expires=' + expires.toGMTString() : '') 49 + (path ? '; path=' + path : '/') 50 + (domain ? '; domain=' + domain : '') 51 + (secure ? '; secure' : ''); 52 }
加入购物车功能脚本shop.car.js,代码如下
var shop = {};
shop.addProduct = function (id, name, price, count) {
var carInfo = shop.readData();
if (carInfo[id]) {
carInfo[id].count = (parseInt(count) + parseInt(carInfo[id].count));
}
else {
carInfo[id] = { id: id, name: name, price: price, count: count };
}
shop.saveData(carInfo);
};
shop.removeProduct = function (id) {
var carInfo = shop.readData();
for (var i in carInfo) {
if (i == id) {
carInfo[i] = undefined;
}
}
shop.saveData(carInfo);
};
shop.saveData = function (info) {
var infoStr = "";
for (var i in info) {
var element = info[i];
if (element) {
infoStr += info[i].id + "," + info[i].name + "," + info[i].price + "," + info[i].count + ";";
}
}
var shop_car = $.cookie("shop-car", infoStr);
};
shop.readData = function () {
var shop_car = $.cookie("shop-car");
var reInfo = {};
if (shop_car) {
shop_car = shop_car.split(";");
for (var i = 0 ; i < shop_car.length; i++) {
if (shop_car[i]) {
shop_car[i] = shop_car[i].split(",");
reInfo[shop_car[i][0]] = { id: shop_car[i][0], name: shop_car[i][1], price: shop_car[i][2], count: shop_car[i][3] };
}
}
}
return reInfo;
}
//得到总价格 update 2016-3-31 14:35:03 by Questionfeet
shop.getPrice = function () {
var price = 0;
var shop_car = $.cookie("shop-car");
var reInfo = {};
if (shop_car) {
shop_car = shop_car.split(";");
for (var i = 0 ; i < shop_car.length; i++) {
if (shop_car[i]) {
shop_car[i] = shop_car[i].split(",");
for (var j = 0; j < parseInt(shop_car[i][3]) ; j++) {
price += parseInt(shop_car[i][2]);
}
}
}
}
return price;
}
///设置数量,count可以为负数 update 2016-3-31 14:35:03 by Questionfeet
shop.setCount = function (id, count) {
var carItems = shop.readData()
for (var i in carItems) {
if (i == id) {
shop.addProduct(id, carItems[i].name, carItems[i].price, count);
}
}
}
//得到总数量 update 2016-3-31 14:35:03 by Questionfeet
shop.getCount = function () {
var count = 0;
var shop_car = $.cookie("shop-car");
var reInfo = {};
if (shop_car) {
shop_car = shop_car.split(";");
for (var i = 0 ; i < shop_car.length; i++) {
if (shop_car[i]) {
shop_car[i] = shop_car[i].split(",");
count += parseInt(shop_car[i][3]);
}
}
}
return count;
}
shop.clear = function () {
$.cookie("shop-car", "");
return;
}
完成以上步骤,简易而强大的前端购物车已经加入项目中了。
code by questionfeet