简单3步 js使用cookie实现的购物车功能[原创]
2015-05-24 03:06
1081 查看
引入JQuery.js支持
加入JQuery.Cookie.js,代码如下
View Code
加入购物车功能脚本shop.car.js,代码如下
完成以上步骤,简易而强大的前端购物车已经加入项目中了。
code by questionfeet
加入JQuery.Cookie.js,代码如下
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; } }; function getcookie(name) { var cookie_start = document.cookie.indexOf(name); var cookie_end = document.cookie.indexOf(";", cookie_start); return cookie_start == -1 ? '' : unescape(document.cookie.substring(cookie_start + name.length + 1, (cookie_end > cookie_start ? cookie_end : document.cookie.length))); } function setcookie(cookieName, cookieValue, seconds, path, domain, secure) { var expires = new Date(); expires.setTime(expires.getTime() + seconds); document.cookie = escape(cookieName) + '=' + escape(cookieValue) + (expires ? '; expires=' + expires.toGMTString() : '') + (path ? '; path=' + path : '/') + (domain ? '; domain=' + domain : '') + (secure ? '; secure' : ''); }
View Code
加入购物车功能脚本shop.car.js,代码如下
var shop = {}; shop.addProduct = function (id, name, price, count) { var carInfo = shop.readData(); if (carInfo[id]) { carInfo[id].count = (parseInt(count) + parseInt(carInfo[id].count)); } else { carInfo[id] = { id: id, name: name, price: price, count: count }; } shop.saveData(carInfo); }; shop.removeProduct = function (id) { var carInfo = shop.readData(); for (var i in carInfo) { if (i == id) { carInfo[i] = undefined; } } shop.saveData(carInfo); }; shop.saveData = function (info) { var infoStr = ""; for (var i in info) { var element = info[i]; if (element) { infoStr += info[i].id + "," + info[i].name + "," + info[i].price + "," + info[i].count + ";"; } } var shop_car = $.cookie("shop-car", infoStr); }; shop.readData = function () { var shop_car = $.cookie("shop-car"); var reInfo = {}; if (shop_car) { shop_car = shop_car.split(";"); for (var i = 0 ; i < shop_car.length; i++) { if (shop_car[i]) { shop_car[i] = shop_car[i].split(","); reInfo[shop_car[i][0]] = { id: shop_car[i][0], name: shop_car[i][1], price: shop_car[i][2], count: shop_car[i][3] }; } } } return reInfo; } //得到总价格 update 2016-3-31 14:35:03 by Questionfeet shop.getPrice = function () { var price = 0; var shop_car = $.cookie("shop-car"); var reInfo = {}; if (shop_car) { shop_car = shop_car.split(";"); for (var i = 0 ; i < shop_car.length; i++) { if (shop_car[i]) { shop_car[i] = shop_car[i].split(","); for (var j = 0; j < parseInt(shop_car[i][3]) ; j++) { price += parseInt(shop_car[i][2]); } } } } return price; } ///设置数量,count可以为负数 update 2016-3-31 14:35:03 by Questionfeet shop.setCount = function (id, count) { var carItems = shop.readData() for (var i in carItems) { if (i == id) { shop.addProduct(id, carItems[i].name, carItems[i].price, count); } } } //得到总数量 update 2016-3-31 14:35:03 by Questionfeet shop.getCount = function () { var count = 0; var shop_car = $.cookie("shop-car"); var reInfo = {}; if (shop_car) { shop_car = shop_car.split(";"); for (var i = 0 ; i < shop_car.length; i++) { if (shop_car[i]) { shop_car[i] = shop_car[i].split(","); count += parseInt(shop_car[i][3]); } } } return count; } shop.clear = function () { $.cookie("shop-car", ""); return; }
完成以上步骤,简易而强大的前端购物车已经加入项目中了。
code by questionfeet
相关文章推荐
- jQuery使用cookie与json简单实现购物车功能
- jQuery使用cookie与json简单实现购物车功能
- 使用Angular.js实现简单的购物车功能
- jQuery使用cookie与json简单实现购物车功能
- 使用node.js实现简单注册登录功能
- Java使用cookie实现简单的单点登录功能
- 【原创】js中利用cookie实现记住密码功能
- 使用jquery.cookie.js插件实现记住密码功能
- 用js+cookie实现商城的购物车功能
- 原创:微信小程序+WEB使用JS实现注册【60s】倒计时功能
- SpringMVC使用Cookie实现购物车功能
- Cookie的使用及保存中文并用Cookie实现购物车功能
- 【JSP】Cookie的使用及保存中文,并用Cookie实现购物车功能
- 【JSP】Cookie的使用及保存中文,并用Cookie实现购物车功能
- cookie的使用,并用cookie实现购物车功能
- ASP.NET使用Cookie简单实现记住登陆状态功能
- jQuery实现换肤功能(使用cookie.js插件)
- 使用JS实现简单缓存功能,防止用户重复点击,重复AJAX提交
- js简单的使用indexOf实现contains功能
- JS简单实现父子窗口传值功能示例【未使用iframe框架】