浅谈购物车中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...
    },
  };