简单3步 js使用cookie实现的购物车功能[原创]

引入JQuery.js支持

加入JQuery.Cookie.js，代码如下

 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，代码如下

 1 var shop = {};
 2 shop.addProduct = function(id,name,price,count){
 3     var carInfo = shop.readData();
 4     if(carInfo[id])
 5     {
 6         carInfo[id].count = (parseInt(count) + parseInt(carInfo[id].count));
 7     }
 8     else{
 9         carInfo[id] = {id:id,name:name,price:price,count:count};
10     }
11     shop.saveData(carInfo);
12 };
13
14 shop.removeProduct = function(id){
15     var carInfo = shop.readData();
16     for (var i in carInfo)
17     {
18         if(i == id)
19         {
20             carInfo[i] = undefined;
21         }
22     }
23     shop.saveData(carInfo);
24 };
25
26 shop.saveData = function(info){
27     var infoStr = "";
28     for (var i in info) {
29         var element = info[i];
30         if(element){
31         infoStr += info[i].id + ","+info[i].name + ","+info[i].price + ","+info[i].count + ";";
32         }
33     }
34     var shop_car = $.cookie("shop-car",infoStr);
35 };
36
37 shop.readData = function(){
38     var shop_car = $.cookie("shop-car");
39     var reInfo = {};
40     if(shop_car){
41         shop_car = shop_car.split(";");
42         for(var i= 0 ;i< shop_car.length;i++)
43         {
44             if(shop_car[i])
45             {
46                 shop_car[i] = shop_car[i].split(",");
47                 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]};
48             }
49         }
50     }
51
52     return reInfo;
53 }
54
55 shop.clear = function(){
56     $.cookie("shop-car","");
57     return;
58 }

完成以上步骤，简易而强大的前端购物车已经加入项目中了。

code by questionfeet