購物車對於電商網站來說是一個非常重要的模塊。最近自己的項目中也用到了，所以拿出來說說事！
購物車是用戶選擇商品的一個緩存的地方。其中包含了商品的基本信息，例如：商品的描述，商品的價格，商品的數量等等。
對於這個緩存而言，實現的方式是有很多種的，當然也是各有優劣，簡單說一下:
1.session：對話的時效性的問題，如果客戶選購商品的途中瀏覽器突然關閉，服務端找不到cookie中的sessionid了，那么選購的商品就不存在了
2.cookie：只要添加了就一直存在，只要不是手動的去清除或者expires為默認的過期時間。但是安全性無法保證，而且也無法對客戶的喜好進行定量的分析，有個數和長度的限制。
3.直接入數據庫:添加商品就反復的讀寫數據庫，硬件要求高，影響性能。數據持久存在
4.緩存數據庫：先暫存進入類似redis的緩存數據庫中，登錄后再寫入數據庫，但是對硬件有要求
再反觀各大電商網站，基本上分為三個流程：
一.例如淘寶，你瀏覽商品是可以的。但是如果你要添加商品到購物車的話就需要登錄；
二.例如京東，無論是未登錄還是登錄的用戶都可以使用將需要的商品添加入購物車內；
三.例如蘇寧，添加購物車只顯示商品個數，並不顯示相關的商品信息，這里就不做討論了。
如此看來，推測淘寶的業務邏輯是比京東的要簡單的。因為登錄了話這些數據肯定就要入庫了，淘寶財大氣粗，技術精湛，數據全部入庫對於淘寶來說也不是什么很大的問題。而且這些用戶的瀏覽數據還可以方便淘寶進行大數據的分析，對用戶進行商品的推送，乃至於若干年后給你來一個這十年喜愛商品的統計等等。而且只要你加了，除非你自己去刪，要不然就等着你花錢來買！你怕不怕
具體怎么使用或者是結合使用就要看具體的場景和需求了，我們是選擇了使用cookie作為購物車商品緩存的介質。
cookie:name=value;
例如下面：cookie的name就是_gads和_utma;value就是ID=b67xxxx015和22xxxx709.5。總數為兩個,中間以封號分隔。
document.cookie; "_gads=ID=b67e99f3b63cd9db:T=1438053105; _utma=226521935.1840446057.1438107104.1440702591.1446462709.5;
還剩下4個可選參數。expires:設置過期時間。path:設置路徑。domain:設置域。secure:設置是否基於https的安全鏈接。
在添加購物車時我們直接在DOM對象上取得商品的各個屬性值。然后將它存入一個product對象里面。再將這個對象轉成json格式寫入cookie中，cookie的value值只能是字符串，如果不轉成json而是直接以對象存入cookie中，在cookie中是以object這個名字存儲的，最重要的是cookie中不能攜帶特殊符號(例如 "$",";").再通過一系列操作將cookie變成最后需要的狀態。
后端在用戶登錄以后到結算頁面時候讀取cookie，付款頁面時將cookie值寫入到數據庫中,如果攜帶特殊符號java后端要取得cookie值的話,前端就必須要通過encodeURIComponent()這個方法把值進行編碼。要不然后端是無法獲取到cookie的值。推薦無論是否有特殊符號都進行編碼。
以下是購物車的大致結構:
"use strict";
//創建cartlist
function CartList(cart){
this.ele=$(cart.ele);
this.btnBool=cart.obtn;
this.init();
}
var setCart={
ele:"#xxx",
obtn:false
};
CartList.prototype={
init:function(){
do something...
},
//創建html
setCartxxx:function(data_all,data_single){
do something...
},
//添加條目
renderItem:function(cart_center,data_single){
do something...
},
//商品個數
setCartxxx:function(num,data_all){
do something...
},
//結算
showCartxxx:function(data_all){
do something...
},
//顯示與隱藏
Cartxxx:function(){
do something...
},
};