cookie 购物车

数据应该是后台传来，在这我是用数组模拟的，根据数组长度生成对应的数据，代码会用到封装好的cookie，我把cookie上传到资源里了，需要的可以下
商品页代码：（这些代码是写在script标签内的）

//数组中存储的数据，图片路径根据自己的修改即可
var data = [{
				"id":10001,
				"title":"蒙牛",
				"price":60,
				"imgUrl":"img/photo1.jpg"
			},{
				"id":10002,
				"title":"婚纱照",
				"price":19999,
				"imgUrl":"img/photo2.jpg"
			},{
				"id":10003,
				"title":"加湿器",
				"price":100,
				"imgUrl":"img/photo3.jpg"
			}];
//生成结构
			var oUl = document.getElementById("productList");
			var str = "";
			for(var i = 0; i < data.length; i++){
				str += "<li><img src='"+data[i].imgUrl+"'><p>"+data[i].title+"</p><p>"+data[i].price+"</p><input class='addBtn' type='button' data-id='"+data[i].id+"' value='加入购物车'></li>";
			}
			oUl.innerHTML = str;
			
			//加入购物车
			var cartNum = document.getElementById("cartNum");
			var oNum = cartNum.children[0];
			var count = 0;
			
			
			var addBtns = document.getElementsByClassName("addBtn");
			//定义一个对象，去保存id和数量 判断cookie里有没有存过数据，有就用，没有就赋值为{}
			if(getCookie("cart")){
				var obj = JSON.parse(getCookie("cart"));//将json字符串转换成对象的
			}else{
				var obj = {};
			}
			//取所有购物车商品数量
			for(var i in obj){
				count += obj[i];
			}
			oNum.innerHTML = count;
			
			for(var i = 0; i < addBtns.length; i++){
				addBtns[i].onclick = function(){
					//存数据时 存id:num cart {"10001":1,"10002":3}
					//考虑如果取到加入购物车的商品id
					var prodId = this.getAttribute("data-id");
					if(obj[prodId]==undefined){
						obj[prodId] = 1;
					}else{
						obj[prodId]++;
					}
					
					//把这个对象存到cookie
					
					//console.log(obj);
					
					var objToStr = JSON.stringify(obj);//将js对象（数组，对象）转换成JSON格式的字符串
					
					setCookie("cart",objToStr,7);
					
					//显示购物篮中的数量
					oNum.innerHTML = ++count;

				}
			}

购物车页面的代码：（这些代码也是写在script标签内的）

/*var data = [{
				"id":10001,
				"title":"蒙牛",
				"price":60,
				"imgUrl":"img/photo1.jpg"
			},{
				"id":10002,
				"title":"婚纱照",
				"price":19999,
				"imgUrl":"img/photo2.jpg"
			},{
				"id":10003,
				"title":"加湿器",
				"price":100,
				"imgUrl":"img/photo3.jpg"
			}];*/
			var data = {"10001":{
				"id":10001,
				"title":"蒙牛",
				"price":60,
				"imgUrl":"img/photo1.jpg"
			},"10002":{
				"id":10002,
				"title":"婚纱照",
				"price":19999,
				"imgUrl":"img/photo2.jpg"
			},"10003":{
				"id":10003,
				"title":"加湿器",
				"price":100,
				"imgUrl":"img/photo3.jpg"
			}};
			var oList = document.getElementById("cartList");
			var obj = {};
	
	//从cookie中取出数据加入到页面中
		if(getCookie("cart")){
				obj = JSON.parse(getCookie("cart"));
			}
			var str = "";
			for(var i in obj){
				/*for(var j = 0; j < data.length; j++){
					if(i==data[j].id){
						str += "<li><img src='"+data[j].imgUrl+"'><span>"+data[j].title+"</span><span>"+data[j].price+"</span><span>"+obj[i]+"</span></li>"
					}
				}*/
			str += "<li><img src='"+data[i].imgUrl+"'><span>"+data[i].title+"</span><span>"+data[i].price+"</span><span>"+obj[i]+"</span></li>"
				
			}
			oList.innerHTML = str;
	

到这购物车就实现了