淺談購物車中cookie的使用

購物車對於電商網站來講是一個很是重要的模塊。最近本身的項目中也用到了，因此拿出來講說事！

購物車是用戶選擇商品的一個緩存的地方。其中包含了商品的基本信息，例如：商品的描述，商品的價格，商品的數量等等。

對於這個緩存而言，實現的方式是有不少種的，固然也是各有優劣，簡單說一下:

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...
    },
  };