jQuery基于json与cookie实现购物车的方法


Posted in Javascript onApril 15, 2016

本文实例讲述了jQuery基于json与cookie实现购物车的方法。分享给大家供大家参考,具体如下:

json 格式:

[{'ProductID':ABC','Num':'1'},{'ProductID':DEF,'Num':'2'}]

这里使用到了 $.cookie这个插件。这个插件的代码在文章的最后

/*
添加商品及数量到购物车cookie中,返回当前商品在cookie中的总数
*/
function AddToShoppingCar(id, num) {
  var _num = 1;
  if (num != undefined)
    _num = num;
  var totalNum = _num; //总数默认为传入参数
  var cookieSet = { expires: 7, path: '/' }; //设置cookie路径的
//  $.cookie(cookieProductID, null, cookieSet);//清除Cookie
  var jsonStr = "[{'ProductID':'" + id + "','Num':'" + _num + "'}]"; //构造json字符串,id是商品id  num是这个商品的数量
  if ($.cookie(cookieProductID) == null) {
    $.cookie(cookieProductID, jsonStr, cookieSet); //如果没有这个cookie就设置他
  }
  else {
    var jsonObj = eval('(' + $.cookie(cookieProductID) + ')'); //如果有,把json字符串转换成对象
    var findProduct = false;//是否找到产品ID,找到则为TRUE,否则为FALSH
    for (var obj in jsonObj) {
      if (jsonObj[obj].ProductID == id) {
        jsonObj[obj].Num = Number(jsonObj[obj].Num) + _num;
        totalNum = jsonObj[obj].Num;
        findProduct = true;
        break;
      }
    }
    if (findProduct == false) { //没找到,则添加
      jsonObj[jsonObj.length] = new Object();
      jsonObj[jsonObj.length - 1].ProductID = id;
      jsonObj[jsonObj.length - 1].Num = num;
    }
    $.cookie(cookieProductID, JSON.stringify(jsonObj), cookieSet); //写入coockie  JSON需要json2.js支持
  }
  return totalNum;
  //  alert($.cookie(cookieProductID));
}
//以下为cookie插件代码
jQuery.cookie = function(name, value, options) {
  if (typeof value != 'undefined') { // name and value given, set cookie
    options = options || {};
    if (value === null) {
      value = '';
      options.expires = -1;
    }
    var expires = '';
    if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
      var date;
      if (typeof options.expires == 'number') {
        date = new Date();
        date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
      } else {
        date = options.expires;
      }
      expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
    }
    var path = options.path ? '; path=' + options.path : '';
    var domain = options.domain ? '; domain=' + options.domain : '';
    var secure = options.secure ? '; secure' : '';
    document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
  } else { // only name given, get cookie
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
      var cookies = document.cookie.split(';');
      for (var i = 0; i < cookies.length; i++) {
        var cookie = jQuery.trim(cookies[i]);
        // Does this cookie string begin with the name we want?
        if (cookie.substring(0, name.length + 1) == (name + '=')) {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
        }
      }
    }
    return cookieValue;
  }
};

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS中style属性
Oct 11 Javascript
Div Select挡住的解决办法
Aug 07 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
JS实现一个简单的日历
Feb 22 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
Window.Open打开窗体和if嵌套代码
Apr 15 #Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 #Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 #Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 #Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 #Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 #Javascript
jQuery中的基本选择器用法学习教程
Apr 14 #Javascript
You might like
php 静态变量的初始化
2009/11/15 PHP
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
php生成随机密码的三种方法小结
2010/09/04 PHP
php curl的深入解析
2013/06/02 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
基于Python __dict__与dir()的区别详解
2017/10/30 Python
Python实现一个优先级队列的方法
2020/07/31 Python
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
信息专业大学生自我评价分享
2014/01/17 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
供应链金融服务方案
2014/05/25 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
关于召开会议的通知
2015/04/15 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
PHP RabbitMQ消息列队
2022/05/11 PHP