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简单体验
Jan 10 Javascript
jquery animate 动画效果使用说明
Nov 04 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 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
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
jQuery 动画基础教程
2008/12/25 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
python实现抖音视频批量下载
2018/06/20 Python
详解python运行三种方式
2019/05/13 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
导游的职业规划书范文
2013/12/27 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
挂科检讨书范文
2014/02/20 职场文书
高中生班主任评语
2014/04/25 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
资产运营委托书范本
2014/10/16 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers