我想做一个购物车，写了简单的html和js文件，但是cookie的存取出现问题，$.cookie存之前source变量里的字符串是存在的，但是不知道存还是取的问题，取出来的时候就是undefined，求助各位大神
//购物车物品
var Item=function(){
this.id=0;
this.name='';
this.amount=0;
this.price=0;
};
//购物车
var Cart=function(){
this.user_id=0;
this.total=0;
this.items=new Array();
};
var CartHelper=function () {
//购物车清空
this.Clear=function(cart){
cart.total=0;
cart.items=new Array();
this.Save(cart);
};
//购物车添加
this.Add=function(cart,item){
var exist=0;
for(var i=0;i<cart.items.length;i++){
if(cart.items[i].id==item.id){
cart.items[i].amount++;
cart.total+=items[i].price;
exist=1;
}
}
if(exist==0){
cart.items.push(item);
cart.total+=item.amount*item.price;
}
console.info(cart);
this.Save(cart);
};
//购物车物品删除
this.Del=function(cart,id){
$.each(cart.items,function (index,item) {
if(item.id==id){
cart.total-=cart.items[index].price*cart.items[index].amount;
cart.items.splice(index,1);
}
});
this.Save(cart);
};
//购物车内查找
this.Find=function(cart,id){
$.each(cart.items,function (index,item) {
if(item.id==id){
return index;
}
});
};
//改变数量
this.Change=function(cart,id,amount){
var index=this.Find(cart,id);
console.info(index);
var item=cart.items[index];
var old_amount=item.amount;
cart.items[index].amount=amount;
var diff=amount-old_amount;
cart.total+=diff*cart.items[index].price;
this.Save(cart);
};
//cookie读取购物车操作
this.Read=function(user_id){
console.info(user_id);
var source=$.cookie(user_id);
console.info(source);
var cart=new Cart();
if(source==null || source==''){
cart.user_id=user_id;
return cart;
}else{
var arr=source.split('##');
for(var i=0;i<arr.length;i++){
var item=this.ItemToObject(arr[i]);
cart.items.push(item);
cart.total+=item.amount*item.price;
}
return cart;
}
};
this.ItemToObject = function (str) {
var arr = str.split('||');
var item = new Item();
item.id = arr[0];
item.name = unescape(arr[1]);
item.amount = arr[2];
item.price = arr[3];
return item;
};
this.ItemToString = function (item) {
return item.id + "||" + escape(item.name) + "||" + item.amount + "||" + item.price;
};
//cookies保存
this.Save=function(cart){
var source='';
console.info(cart);
for(var i=0;i<cart.items.length;i++){
if (source!='') {
source+='##';
}
source+=this.ItemToString(cart.items[i]);
}
console.info('save' + source);
console.info('userid' + cart.user_id);
$.cookie(cart.user_id,source,{expires:7,path:'D:\cart_cookies'});
};
};
$(function () {
var cartHelper=new CartHelper();
$('.add').click(function(){
if($(this).parent().children('.select').is(':checked')){
var amount=$(this).parent().children('.amount').val();
amount++;
$(this).parent().children('.amount').val(amount);
var cart =cartHelper.Read($('#user_id').val());
var id=$(this).parent().children('.id').html();
cartHelper.Change(cart,id,amount);
}
});
$('.min').click(function(){
if($(this).parent().children('.select').is(':checked')){
if($(this).parent().children('.amount').val()==0){
alert('商品数量已经到0！');
}else {
var amount=$(this).parent().children('.amount').val();
amount--;
$(this).parent().children('.amount').val(amount);
var cart =cartHelper.Read($('#user_id').val());
var id=$(this).parent().children('.id').html();
cartHelper.Change(cart,id,amount);
}
}
});
$('.select').click(function () {
var user_id=$('#user_id').val()
var cart =cartHelper.Read(user_id);
console.info(user_id);
var item=new Item();
item.id=$(this).parent().children('.id').html();
console.info(item.id);
item.name=$(this).parent().children('.name').html();
console.info(item.name);
item.price=$(this).parent().children('.price').html();
console.info(item.price);
item.amount=1;
if($(this).is(':checked')){
cartHelper.Add(cart,item);
$(this).parent().children('.amount').val(1);
}else {
cartHelper.Del(cart,item.id);
$(this).parent().children('.amount').val(0);
}
});
$('#clear').click(function () {
var cart =cartHelper.Read($('#user_id').val());
cartHelper.Clear(cart);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车demo</title>
</head>
<body>
<input type="hidden" id="user_id" value="1597">
<table>
<tr id="1">
<td>
<input type="checkbox" class="select">
<span class="id">1</span>
<span class="name">课本</span>
<span class="price">6.00</span>
<input class="min" name="" type="button" value="-" />
<input class="amount" type="text" value="0" />
<input class="add" name="" type="button" value="+" />
</td>
</tr>
<tr id="2">
<td>
<input type="checkbox" class="select">
<span class="id">2</span>
<span class="name">书包</span>
<span class="price">50.00</span>
<input class="min" name="" type="button" value="-" />
<input class="amount" type="text" value="0" />
<input class="add" name="" type="button" value="+" />
</td>
</tr>
<tr id="3">
<td>
<input type="checkbox" class="select">
<span class="id">3</span>
<span class="name">衣服</span>
<span class="price">100.00</span>
<input class="min" name="" type="button" value="-" />
<input class="amount" type="text" value="0" />
<input class="add" name="" type="button" value="+" />
</td>
</tr>
<tr id="4">
<td>
<input type="checkbox" class="select">
<span class="id">4</span>
<span class="name">手机</span>
<span class="price">1000.00</span>
<input class="min" name="" type="button" value="-" />
<input class="amount" type="text" value="0" />
<input class="add" name="" type="button" value="+" />
</td>
</tr>
</table>
<a>购物车</a>
<table>
<tr>
<th>user_id</th>
<th>总价</th>
<th>物品</th>
</tr>
<tr>
<td id=""></td>
<td></td>
<td></td>
</tr>
</table>
<button id="clear" >清空购物车</button>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="cart_helper.js"></script>
</body>
</html>
