為什么不存session？
首先，session存在時間限制，會定期清空的，而cookie如果不主動清或者設置定期則不會清楚；
session存放在服務器端，cookie存放在客戶端瀏覽器。
購物車存放的都是臨時的物品，購買之后才產生真正的交易記錄，所以這部分數據一般不會放到session中。session還有一個問題就是容易失效，默認20分鍾左右會自動銷毀。所以存放到cookie中是比較合理的選擇。
Cookie方式：
優點：購物車信息存儲在客戶端，不占用服務器資源，基本可以到達持久化存儲。
缺點：Cookie有大小的限制，不能超過4K，而且不夠安全。如果是個人PC機，Cookie能很好的保存購物車信息，但如果是公共辦公環境，Cookie保存的信息基本就失效了(會被其他人購物車信息覆蓋)。對一個大型的電子商務網站，我們需要對用戶的購買行為進行分析，需要對用戶推薦用戶感興趣的商品，如果把購物車信息保存在Cookie中，則不能對用戶購買行為分析統計。
我在前端模板中把購物車存到cookie中。
首先：
我進行了封裝，把代碼封裝到js中，
//購物車
var Cart = function () {
this.Count = 0;
this.Total = 0;
this.Items = new Array();
};
//購物車集合對象
var CartItem = function () {
this.Id = 0;
this.Name = "";
this.Count = 0;
this.Price = 0;
};
//購物車操作
var CartHelper = function () {
this.cookieName = $.cookie('username');
this.Clear = function () {
var cart = new Cart();
this.Save(cart);
return cart;
};
//向購物車添加
this.Add = function (id, name, count, price) {
var cart = this.Read();
var index = this.Find(id);
if(count==0){
this.Del(id);
}else{
//如果ID已存在，覆蓋數量
if (index > -1) {
cart.Total -= (((cart.Items[index].Count * 100) * (cart.Items[index].Price * 100)) / 10000);
cart.Items[index].Count = count;
cart.Total += (((cart.Items[index].Count * 100) * (cart.Items[index].Price * 100)) / 10000);
} else {
var item = new CartItem();
item.Id = id;
item.Name = name;
item.Count = count;
item.Price = price;
cart.Items.push(item);
cart.Count++;
cart.Total += (((item.Count * 100) * (item.Price * 100)) / 10000);
// console.log(cart);
// cart.Total += (((cart.Items[index].Count * 100) * (cart.Items[index].Price * 100)) / 10000);
}
cart.Total=Math.round(cart.Total * 100) / 100;
this.Save(cart);
}
return cart;
};
//改變數量
this.Change = function (id, count) {
var cart = this.Read();
var index = this.Find(id);
cart.Items[index].Count = count;
this.Save(cart);
return cart;
};
//移出購物車
this.Del = function (id) {
var cart = this.Read();
var index = this.Find(id);
if (index > -1) {
var item = cart.Items[index];
cart.Count--;
cart.Total = cart.Total - (((item.Count * 100) * (item.Price * 100)) / 10000);
cart.Items.splice(index, 1);
this.Save(cart);
}
return cart;
};
//根據ID查找
this.Find = function (id) {
var cart = this.Read();
var index = -1;
for (var i = 0; i < cart.Items.length; i++) {
if (cart.Items[i].Id == id) {
index = i;
}
}
return index;
};
//COOKIE操作
this.Save = function (cart) {
var source = "";
for (var i = 0; i < cart.Items.length; i++) {
if (source != "") { source += "|$|"; }
source += this.ItemToString(cart.Items[i]);
}
$.cookie(this.cookieName, source);
};
this.Read = function () {
//讀取COOKIE中的集合
var source = $.cookie(this.cookieName);
var cart = new Cart();
if (source == null || source == "") {
return cart;
}
var arr = source.split("|$|");
cart.Count = arr.length;
for (var i = 0; i < arr.length; i++) {
var item = this.ItemToObject(arr[i]);
cart.Items.push(item);
cart.Total += (((item.Count * 100) * (item.Price * 100)) / 10000);
}
return cart;
};
this.ItemToString = function (item) {
return item.Id + "||" + escape(item.Name) + "||" + item.Count + "||" + item.Price;
};
this.ItemToObject = function (str) {
var arr = str.split('||');
var item = new CartItem();
item.Id = arr[0];
item.Name = unescape(arr[1]);
item.Count = arr[2];
item.Price = arr[3];
return item;
};
};
//調用
var xc=new CartHelper();
在商品詳情頁中寫了onclick(),並調用js里面的添加購物車邏輯:
function getcookie(){
xc.Add(id,$('#title').html(),4,$('#price').html());
console.log(xc.Read());
console.log($('#title').html());
}
在cookie購物車模板中，把數據渲染出來，並調用js:
<ul class="cart_list_td clearfix" v-for="(sku,index) in cart" id="porcdesc" >
<span id="pro_list">
</span>
</ul>
<script>
console.log(xc.Read())
let pro_list = xc.Read();
var abs = pro_list.Items;
// alert(abs);SS
var username = $.cookie('username');
// alert(abs[0]["Id"]);
let ul = '';
for (var i=0;i<abs.length;i++){
alert("123")
ul += '<ul class="cart_list_td clearfix" v-for="(sku,index) in cart" id="porcdesc" ><li class="col01"><input type="checkbox" name="product_id" v-model="sku.selected" @change="update_selected(index)" value="'+abs[i]["Id"]+','+abs[i]["Id"]+','+abs[i]["Name"]+'" onclick="dod()"></li><li class="col02"><img src=""></li><li class="col03" id="prodtit" >'+abs[i]["Name"]+'</li><li class="col05" id="prodpic">'+abs[i]["Price"]+'元</li><li class="col08">'+abs[i]["Count"]+'</li><li id="pkid" value="'+abs[i]["Id"]+'"><a @click="on_delete(index)" onclick="delpro('+abs[i]["Id"]+')">刪除</a></li></ul>'}
ul += '';
$("#pro_list").html(ul);
</script>