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 页面坐标相关知识整理
Jan 09 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
js通过canvas生成图片缩略图
Oct 02 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新手上路(二)
2006/10/09 PHP
php 购物车实例(申精)
2009/05/11 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
Python基于Tkinter实现的记事本实例
2015/06/17 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
六查六看自查材料
2014/02/17 职场文书
女生节标语
2014/06/26 职场文书
医生个人年终总结
2015/02/28 职场文书
杨善洲电影观后感
2015/06/04 职场文书
看上去很美观后感
2015/06/10 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers