HTML5标准下电商平台购物车的设计和实现

钱立

摘要：购物车是电商平台的一项标准重要功能。该文通过对比分析以往购物车设计中采用cookie和session方式的优缺点，提出了把购物车数据规范为JSON格式后，在HTML5标准下采用localStorage方式存储、修改和展示，以及如何与服务器交互实现购物车数据的持久存储。

关键词：购物车;HTML5;localStorage;JSON

中图分类号：TP393      文献标识码：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 概述

浏览任意一个电商平台网站，除了琳琅满目的商品外，大家一般都会注意到在商品旁边和网页侧边醒目的位置有一个购物车图标。浏览任何商品的同时可点击临近的购物车图标，把此商品放入购物车中。当把多件商品放入购物车后，可点击网页侧边的购物车图标去一次性下单付款。

购物车是一项必不可少的实用功能，设计好了购物车，可以给客户带来愉悦的购物体验，增加用户的粘滞感。购物车中商品持久化存储后，有利于在大数据环境下分析出每个客户的购物偏好，方便电商推荐特定的商品，获得利益最大化。

2 购物车功能

购物车的主要功能有以下几点：

（1） 浏览商品时能随时加入购物车;

（2） 查看购物车中商品情况，根据多个商品单价和对应购买数量，计算出总价;

（3） 更改购物车中商品情况，包括更改购买某个商品的数量和删除某个商品;

（4） 从购物车处下单时，把购物车中数据传给服务器，由服务器决定存储。

除了以上功能外，电商平台通常会注重用户的购物体验。任何一个客户从开始进入一个电商平台首页开始，不管该客户是否是注册用户，用户登录与否，该客户都能将自己喜欢的商品加入购物车中。在购物车下单处理环节，才需要确认是注册用户，因为客户购买的商品需要准确付款、正确的发货地址和联系方式。这时如果客户已注册过，则去登录，否则提示注册为新用户。

3 以往购物车设计方式及优缺点

电商购物车的设计主要有两种思路，一是基于服务器端会话session方式的，一种是基于浏览器客户端cookie方式的。

基于session方式，实现过程如下：当客户浏览某个商品，点击加入购物车，那么把这个商品的ID存入session中，使用AJAX向服务器提交一次数据，服务器将session中这个商品的ID取出来，然后结合这个session的用户ID一起做相应处理（比如存入数据库中）。

该方式的主要缺点有两个，一个是频繁与服务器交互，服务器又频繁与数据库交互，增加了服务器端的资源消耗，效率低;另一个是要用户登录后才方便处理购物车数据提交，如果没有登陆，那么就只有采用記录session的ID作为临时用户ID，一旦客户关闭浏览器后购物车中就无数据了。

基于cookie方式，实现过程如下：当客户浏览某个商品，点击加入购物车，那么把这个商品的ID存入cookie中，cookie中的数据会随着Http请求每次都发送给服务器。服务器每收到一次Http请求都需要从cookie中重新取出购物车数据，然后结合这个Http请求的用户ID一起做相应处理（比如存入数据库中）。

该方式的优点是cookie中的数据是存放在浏览器本地的，客户关闭浏览器后下次打开同一个电商平台，购物车中的数据还在。但前提条件是cookie没有被禁用，同时也没有被清空。cookie也有明显缺点，就是数据存储量限制在4K大小，不利于更多数据的存储。这种方式的另一个显著缺点就是cookie放在Http请求中，请求慢，增加了数据量，同时与服务器频繁交互，也增加了服务器的处理负担，效率低。

4 HTML5标准下购物车设计和实现

通过对比分析上面两种购物车的设计方式，其实两种方式都不理想，当电商平台同时有几十万、上百万用户在往各自的购物车放商品时，服务器端的负担将非常重，所以要考虑提高效率，同时还能提升客户浏览网页的响应速度。

在HTML5标准下，提供了两种在客户端存储数据的新方法。一个是localStorage，没有时间限制的数据存储;另一个是sessionStorage，针对一个session的存储。要实现购物车功能，需选用没有时间限制存储的localStorage。为了实现本地存储，需结合JavaScript使用。

设计购物车需要考虑存储的商品数据结构，考虑到数据格式的统一和便捷处理，采用JSON数据格式。购物车中存放多个商品，一般包括商品ID，商品名称，商品规格，价格，购买数量，商家ID，商家名称。在存放商品的同时最好也存上客户的信息，如果客户已经登陆，那么就存登录用户ID;如果该客户不是注册用户，那么则存session的ID。使用JSON格式表示如下：

varmyCart={ userID：tommy，

userType：1，/*0表示临时用户， 1表示注册用户*/

products：

[{

“productID”： 3434234，

“productName”：”xxx”，

“productType”：”01”，

“price”：199，

“number”：2，

“sellerID”：10000212，

“seller“：”成都Intel代理”

}，{另一个商品}，{另一个商品}，…]}

结合JavaScript使用如下：

（1） 保存购物车数据到本地：

localStorage.setItem（“myCart”，

JSON.stringify（myCart））;

（2） 从本地取出购物车数据，解析为JSON对象处理：

myCart =

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

（3） 添加某个商品到购物车：

先用上面（2）的方法取出myCart，如果myCart存在，则跳过这步。

var newProd = {

“productID”： 2214234，

“productName”：”xxx”， …

};

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

（4） 修改某个商品的数量为n：

同上取出myCart后，再通过传入的需要修改商品数量的索引值i定位到那个商品，myCart.products[i].number=n;

（5） 删除某个商品：

同上取出myCart后，再通过传入的需要删除商品的pId，在myCart.products中定位后删除。最后将删除后的myCart重新转换为JSON字符串再次存储。关键代码如下：

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） 监听本地存储的变化

客户浏览同一个电商平台时，通常会同时打开多个商品详情页面，在这些页面上都有同一个购物车。每个页面上的商品都可单独操作加入购物车中，这时在其他页面上购物车的内容应当同步更新，这就需要监听本地存储的变化。实现如下：

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

console.log（“购物车中数据发生了变化”）;

//更新页面购物车的显示（代码省略）}）;

为避免这种同步更新的设计思路，只需把页面侧边那个购物车图标链接到单独的购物车页面进行处理即可。

（7） 向服务器提交订单

这里需要使用Ajax方式向服务器提交购物车数据，形成购物订单。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）{…}

}）;

}）;

在實现以上购物车时，需要注意几点。首先是加一个商品到购物车时需先判断是否已在购物车中，如果是，则只把相应数量加1。其次是充分利用JSON这种数据格式的优势，在JS中有JSON字符串和JSON对象，这两者是不同的，需要使用相应的方法进行处理。JSON.stringify（obj）是把JSON对象转换为JSON字符串，而JSON.parse（str）是把JSON字符串转换为JSON对象。再次是在处理购物车数据过程中，最好使用JSON对象，因为多个商品被表示为JSON数组数据，可使用数组的push（）来增加商品，使用splice（）删除指定商品。

5 总结

本文分析了电商平台购物车的两种常见设计方式，即session和cookie方式。这两种方式在以前标准中结合Ajax，Servlet等得到了很好实现。但是通过更细的分析知道这两种方式产

生的网络数据量较大，对服务器会造成很大负担，效率低。在HTML5标准下，提供了新的Web存储方式，我们使用localStorage接口可以在客户浏览器端存储和处理大量数据。把购物车数据处理放到客户端，减小网络流量，使得服务器处理量大大减少，提高了效率，同时客户端浏览器的响应速度也得到了提高。

参考文献：

[1] （美）鲍威尔.JavaScript 完全参考手册（第3版）[M].清华大学出版社，2014.

[2] （美）弗里曼，谢延晟，牛化成，等.HTML5权威指南[M].人民邮电出版社，2014.

[3] HTML5 Web存储[DB/OL].W3School网站. http：//www.w3school.com.cn/html5.

[通联编辑：光文玲]