HTML5標(biāo)準(zhǔn)下電商平臺購物車的設(shè)計(jì)和實(shí)現(xiàn)

錢立

摘要：購物車是電商平臺的一項(xiàng)標(biāo)準(zhǔn)重要功能。該文通過對比分析以往購物車設(shè)計(jì)中采用cookie和session方式的優(yōu)缺點(diǎn)，提出了把購物車數(shù)據(jù)規(guī)范為JSON格式后，在HTML5標(biāo)準(zhǔn)下采用localStorage方式存儲、修改和展示，以及如何與服務(wù)器交互實(shí)現(xiàn)購物車數(shù)據(jù)的持久存儲。

關(guān)鍵詞：購物車;HTML5;localStorage;JSON

中圖分類號：TP393? ? ? 文獻(xiàn)標(biāo)識碼：A? ? ? 文章編號：1009-3044（2018）35-0269-02

Abstract： Shopping cart is a standard and important function of the electronic business platform. By comparing and analyzing the advantages and disadvantages of using cookies and sessions in the past shopping cart design， this paper gives a method of storing， modifying and displaying the shopping cart data in JSON format by using localStorage under HTML5 standard， and how to realize the persistent storage of shopping cart data by interacting with the server.

Key words：Shopping Cart; HTML5; localStorage; JSON

1 概述

瀏覽任意一個(gè)電商平臺網(wǎng)站，除了琳瑯滿目的商品外，大家一般都會注意到在商品旁邊和網(wǎng)頁側(cè)邊醒目的位置有一個(gè)購物車圖標(biāo)。瀏覽任何商品的同時(shí)可點(diǎn)擊臨近的購物車圖標(biāo)，把此商品放入購物車中。當(dāng)把多件商品放入購物車后，可點(diǎn)擊網(wǎng)頁側(cè)邊的購物車圖標(biāo)去一次性下單付款。

購物車是一項(xiàng)必不可少的實(shí)用功能，設(shè)計(jì)好了購物車，可以給客戶帶來愉悅的購物體驗(yàn)，增加用戶的粘滯感。購物車中商品持久化存儲后，有利于在大數(shù)據(jù)環(huán)境下分析出每個(gè)客戶的購物偏好，方便電商推薦特定的商品，獲得利益最大化。

2 購物車功能

購物車的主要功能有以下幾點(diǎn)：

（1） 瀏覽商品時(shí)能隨時(shí)加入購物車;

（2） 查看購物車中商品情況，根據(jù)多個(gè)商品單價(jià)和對應(yīng)購買數(shù)量，計(jì)算出總價(jià);

（3） 更改購物車中商品情況，包括更改購買某個(gè)商品的數(shù)量和刪除某個(gè)商品;

（4） 從購物車處下單時(shí)，把購物車中數(shù)據(jù)傳給服務(wù)器，由服務(wù)器決定存儲。

除了以上功能外，電商平臺通常會注重用戶的購物體驗(yàn)。任何一個(gè)客戶從開始進(jìn)入一個(gè)電商平臺首頁開始，不管該客戶是否是注冊用戶，用戶登錄與否，該客戶都能將自己喜歡的商品加入購物車中。在購物車下單處理環(huán)節(jié)，才需要確認(rèn)是注冊用戶，因?yàn)榭蛻糍徺I的商品需要準(zhǔn)確付款、正確的發(fā)貨地址和聯(lián)系方式。這時(shí)如果客戶已注冊過，則去登錄，否則提示注冊為新用戶。

3 以往購物車設(shè)計(jì)方式及優(yōu)缺點(diǎn)

電商購物車的設(shè)計(jì)主要有兩種思路，一是基于服務(wù)器端會話session方式的，一種是基于瀏覽器客戶端cookie方式的。

基于session方式，實(shí)現(xiàn)過程如下：當(dāng)客戶瀏覽某個(gè)商品，點(diǎn)擊加入購物車，那么把這個(gè)商品的ID存入session中，使用AJAX向服務(wù)器提交一次數(shù)據(jù)，服務(wù)器將session中這個(gè)商品的ID取出來，然后結(jié)合這個(gè)session的用戶ID一起做相應(yīng)處理（比如存入數(shù)據(jù)庫中）。

該方式的主要缺點(diǎn)有兩個(gè)，一個(gè)是頻繁與服務(wù)器交互，服務(wù)器又頻繁與數(shù)據(jù)庫交互，增加了服務(wù)器端的資源消耗，效率低;另一個(gè)是要用戶登錄后才方便處理購物車數(shù)據(jù)提交，如果沒有登陸，那么就只有采用記錄session的ID作為臨時(shí)用戶ID，一旦客戶關(guān)閉瀏覽器后購物車中就無數(shù)據(jù)了。

基于cookie方式，實(shí)現(xiàn)過程如下：當(dāng)客戶瀏覽某個(gè)商品，點(diǎn)擊加入購物車，那么把這個(gè)商品的ID存入cookie中，cookie中的數(shù)據(jù)會隨著Http請求每次都發(fā)送給服務(wù)器。服務(wù)器每收到一次Http請求都需要從cookie中重新取出購物車數(shù)據(jù)，然后結(jié)合這個(gè)Http請求的用戶ID一起做相應(yīng)處理（比如存入數(shù)據(jù)庫中）。

該方式的優(yōu)點(diǎn)是cookie中的數(shù)據(jù)是存放在瀏覽器本地的，客戶關(guān)閉瀏覽器后下次打開同一個(gè)電商平臺，購物車中的數(shù)據(jù)還在。但前提條件是cookie沒有被禁用，同時(shí)也沒有被清空。cookie也有明顯缺點(diǎn)，就是數(shù)據(jù)存儲量限制在4K大小，不利于更多數(shù)據(jù)的存儲。這種方式的另一個(gè)顯著缺點(diǎn)就是cookie放在Http請求中，請求慢，增加了數(shù)據(jù)量，同時(shí)與服務(wù)器頻繁交互，也增加了服務(wù)器的處理負(fù)擔(dān)，效率低。

4 HTML5標(biāo)準(zhǔn)下購物車設(shè)計(jì)和實(shí)現(xiàn)

通過對比分析上面兩種購物車的設(shè)計(jì)方式，其實(shí)兩種方式都不理想，當(dāng)電商平臺同時(shí)有幾十萬、上百萬用戶在往各自的購物車放商品時(shí)，服務(wù)器端的負(fù)擔(dān)將非常重，所以要考慮提高效率，同時(shí)還能提升客戶瀏覽網(wǎng)頁的響應(yīng)速度。

在HTML5標(biāo)準(zhǔn)下，提供了兩種在客戶端存儲數(shù)據(jù)的新方法。一個(gè)是localStorage，沒有時(shí)間限制的數(shù)據(jù)存儲;另一個(gè)是sessionStorage，針對一個(gè)session的存儲。要實(shí)現(xiàn)購物車功能，需選用沒有時(shí)間限制存儲的localStorage。為了實(shí)現(xiàn)本地存儲，需結(jié)合JavaScript使用。

設(shè)計(jì)購物車需要考慮存儲的商品數(shù)據(jù)結(jié)構(gòu)，考慮到數(shù)據(jù)格式的統(tǒng)一和便捷處理，采用JSON數(shù)據(jù)格式。購物車中存放多個(gè)商品，一般包括商品ID，商品名稱，商品規(guī)格，價(jià)格，購買數(shù)量，商家ID，商家名稱。在存放商品的同時(shí)最好也存上客戶的信息，如果客戶已經(jīng)登陸，那么就存登錄用戶ID;如果該客戶不是注冊用戶，那么則存session的ID。使用JSON格式表示如下：

varmyCart={ userID：tommy，

userType：1，/*0表示臨時(shí)用戶， 1表示注冊用戶*/

products：

[{

“productID”： 3434234，

“productName”：”xxx”，

“productType”：”01”，

“price”：199，

“number”：2，

“sellerID”：10000212，

“seller“：”成都Intel代理”

}，{另一個(gè)商品}，{另一個(gè)商品}，…]}

結(jié)合JavaScript使用如下：

（1） 保存購物車數(shù)據(jù)到本地：

localStorage.setItem（“myCart”，

JSON.stringify（myCart））;

（2） 從本地取出購物車數(shù)據(jù)，解析為JSON對象處理：

myCart =

JSON.parse（localStorage.getItem（“myCart”））;

（3） 添加某個(gè)商品到購物車：

先用上面（2）的方法取出myCart，如果myCart存在，則跳過這步。

var newProd = {

“productID”： 2214234，

“productName”：”xxx”， …

};

myCart.products.push（JSON.parse（newProd））;

（4） 修改某個(gè)商品的數(shù)量為n：

同上取出myCart后，再通過傳入的需要修改商品數(shù)量的索引值i定位到那個(gè)商品，myCart.products[i].number=n;

（5） 刪除某個(gè)商品：

同上取出myCart后，再通過傳入的需要刪除商品的pId，在myCart.products中定位后刪除。最后將刪除后的myCart重新轉(zhuǎn)換為JSON字符串再次存儲。關(guān)鍵代碼如下：

n = myCart.products.length;

for（i = 0; i < n; i++）{

if（myCart.products[i].prodID == pId）{//判斷是否是要刪除的商品

myCart.products.splice（i，1）; //刪除

//刪除后重新保存

localStorage.setItem（'myCart'， JSON.stringify（myCart））;

}}

（6） 監(jiān)聽本地存儲的變化

客戶瀏覽同一個(gè)電商平臺時(shí)，通常會同時(shí)打開多個(gè)商品詳情頁面，在這些頁面上都有同一個(gè)購物車。每個(gè)頁面上的商品都可單獨(dú)操作加入購物車中，這時(shí)在其他頁面上購物車的內(nèi)容應(yīng)當(dāng)同步更新，這就需要監(jiān)聽本地存儲的變化。實(shí)現(xiàn)如下：

window.addEventListener（“storage”， function（e）{

console.log（“購物車中數(shù)據(jù)發(fā)生了變化”）;

//更新頁面購物車的顯示（代碼省略）}）;

為避免這種同步更新的設(shè)計(jì)思路，只需把頁面?zhèn)冗吥莻€(gè)購物車圖標(biāo)鏈接到單獨(dú)的購物車頁面進(jìn)行處理即可。

（7） 向服務(wù)器提交訂單

這里需要使用Ajax方式向服務(wù)器提交購物車數(shù)據(jù)，形成購物訂單。jQuery參考代碼如下：

$（'#btnPlaceOrder'）.click（function（）{

$.ajax（{

type： 'POST'，

url： 'placeOrderServlet，

contentType："application/json;charset=utf8"，

data： JSON.stringify（myCart），

dataType： 'json'，

success： function（msg）{…}，

error： function（msg）{…}

}）;

}）;

在實(shí)現(xiàn)以上購物車時(shí)，需要注意幾點(diǎn)。首先是加一個(gè)商品到購物車時(shí)需先判斷是否已在購物車中，如果是，則只把相應(yīng)數(shù)量加1。其次是充分利用JSON這種數(shù)據(jù)格式的優(yōu)勢，在JS中有JSON字符串和JSON對象，這兩者是不同的，需要使用相應(yīng)的方法進(jìn)行處理。JSON.stringify（obj）是把JSON對象轉(zhuǎn)換為JSON字符串，而JSON.parse（str）是把JSON字符串轉(zhuǎn)換為JSON對象。再次是在處理購物車數(shù)據(jù)過程中，最好使用JSON對象，因?yàn)槎鄠€(gè)商品被表示為JSON數(shù)組數(shù)據(jù)，可使用數(shù)組的push（）來增加商品，使用splice（）刪除指定商品。

5 總結(jié)

本文分析了電商平臺購物車的兩種常見設(shè)計(jì)方式，即session和cookie方式。這兩種方式在以前標(biāo)準(zhǔn)中結(jié)合Ajax，Servlet等得到了很好實(shí)現(xiàn)。但是通過更細(xì)的分析知道這兩種方式產(chǎn)

生的網(wǎng)絡(luò)數(shù)據(jù)量較大，對服務(wù)器會造成很大負(fù)擔(dān)，效率低。在HTML5標(biāo)準(zhǔn)下，提供了新的Web存儲方式，我們使用localStorage接口可以在客戶瀏覽器端存儲和處理大量數(shù)據(jù)。把購物車數(shù)據(jù)處理放到客戶端，減小網(wǎng)絡(luò)流量，使得服務(wù)器處理量大大減少，提高了效率，同時(shí)客戶端瀏覽器的響應(yīng)速度也得到了提高。

參考文獻(xiàn)：

[1] （美）鮑威爾.JavaScript 完全參考手冊（第3版）[M].清華大學(xué)出版社，2014.

[2] （美）弗里曼，謝延晟，?；桑?HTML5權(quán)威指南[M].人民郵電出版社，2014.

[3] HTML5 Web存儲[DB/OL].W3School網(wǎng)站. http：//www.w3school.com.cn/html5.

[通聯(lián)編輯：光文玲]