简单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 }

View Code

加入购物车功能脚本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 }

View Code

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

 

code by questionfeet