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 相关文章推荐
jQuery textarea的长度进行验证
May 06 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
JavaScript 闭包的使用场景
Sep 17 Javascript
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
java微信开发之上传下载多媒体文件
2016/06/24 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
迟到检讨书5000字
2014/01/31 职场文书
车间机修工岗位职责
2014/02/28 职场文书
法律进学校实施方案
2014/03/15 职场文书
优秀求职信
2014/05/29 职场文书
志愿者活动总结报告
2014/06/27 职场文书
庆六一活动总结
2014/08/29 职场文书
药房管理制度范本
2015/08/06 职场文书
mysql 带多个条件的查询方式
2021/06/05 MySQL
源码解读Spring-Integration执行过程
2021/06/11 Java/Android