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 相关文章推荐
WEB 浏览器兼容 推荐收藏
May 14 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 Javascript
Element PageHeader页头的使用方法
Jul 26 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 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实现的常见排序算法汇总
2014/09/08 PHP
php随机抽奖实例分析
2015/03/04 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
python openpyxl使用方法详解
2019/07/18 Python
python sorted函数原理解析及练习
2020/02/10 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
公共场所标语
2014/06/30 职场文书
购房意向书
2014/08/30 职场文书
员工工作能力评语
2014/12/31 职场文书
监考失职检讨书
2015/01/26 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python