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 相关文章推荐
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
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抽奖小程序的实现代码
2013/06/18 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
js实现选项卡效果
2020/03/07 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python使用thrift教程的方法示例
2019/03/21 Python
python如何制作英文字典
2019/06/25 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
python如何编写win程序
2020/06/08 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
电子商务专业个人的自我评价
2013/12/19 职场文书
大学三年的自我评价
2013/12/25 职场文书
市场安全管理制度
2014/01/26 职场文书
三字经教学反思
2014/04/26 职场文书
无保留意见审计报告
2015/06/05 职场文书