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 相关文章推荐
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
JavaScript 基本概念
Jan 20 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
利用javaScript处理常用事件详解
Apr 14 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
神族 PROTOSS 概述
2020/03/14 星际争霸
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
php服务器的系统详解
2019/10/12 PHP
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
javascript定时器完整实例
2015/02/10 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
vue.js的提示组件
2017/03/02 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
详解python中的 is 操作符
2017/12/26 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
python让函数不返回结果的方法
2020/06/22 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
2015年元旦活动总结
2014/05/09 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
MySQL分库分表详情
2021/09/25 MySQL
Go获取两个时区的时间差
2022/04/20 Golang