浅谈购物车中cookie的使用

购物车对于电商网站来说是一个非常重要的模块。最近自己的项目中也用到了，所以拿出来说说事！

购物车是用户选择商品的一个缓存的地方。其中包含了商品的基本信息，例如：商品的描述，商品的价格，商品的数量等等。

对于这个缓存而言，实现的方式是有很多种的，当然也是各有优劣，简单说一下:

1.session：对话的时效性的问题，如果客户选购商品的途中浏览器突然关闭，服务端找不到cookie中的sessionid了，那么选购的商品就不存在了

2.cookie：只要添加了就一直存在，只要不是手动的去清除或者expires为默认的过期时间。但是安全性无法保证，而且也无法对客户的喜好进行定量的分析，有个数和长度的限制。

3.直接入数据库:添加商品就反复的读写数据库，硬件要求高，影响性能。数据持久存在

4.缓存数据库：先暂存进入类似redis的缓存数据库中，登录后再写入数据库，但是对硬件有要求

再反观各大电商网站，基本上分为三个流程：

一.例如淘宝，你浏览商品是可以的。但是如果你要添加商品到购物车的话就需要登录；

二.例如京东，无论是未登录还是登录的用户都可以使用将需要的商品添加入购物车内；

三.例如苏宁，添加购物车只显示商品个数，并不显示相关的商品信息，这里就不做讨论了。

如此看来，推测淘宝的业务逻辑是比京东的要简单的。因为登录了话这些数据肯定就要入库了，淘宝财大气粗，技术精湛，数据全部入库对于淘宝来说也不是什么很大的问题。而且这些用户的浏览数据还可以方便淘宝进行大数据的分析，对用户进行商品的推送，乃至于若干年后给你来一个这十年喜爱商品的统计等等。而且只要你加了，除非你自己去删，要不然就等着你花钱来买！你怕不怕

具体怎么使用或者是结合使用就要看具体的场景和需求了，我们是选择了使用cookie作为购物车商品缓存的介质。

cookie:name=value;

例如下面：cookie的name就是_gads和_utma;value就是ID=b67xxxx015和22xxxx709.5。总数为两个,中间以封号分隔。

 

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