购物车放redis还是数据库 购物车用session还是cookie

为什么不存session？

首先，session存在时间限制，会定期清空的，而cookie如果不主动清或者设置定期则不会清楚；

session存放在服务器端，cookie存放在客户端浏览器。

购物车存放的都是临时的物品，购买之后才产生真正的交易记录，所以这部分数据一般不会放到session中。session还有一个问题就是容易失效，默认20分钟左右会自动销毁。所以存放到cookie中是比较合理的选择。

Cookie方式：

优点：购物车信息存储在客户端，不占用服务器资源，基本可以到达持久化存储。
缺点：Cookie有大小的限制，不能超过4K，而且不够安全。如果是个人PC机，Cookie能很好的保存购物车信息，但如果是公共办公环境，Cookie保存的信息基本就失效了(会被其他人购物车信息覆盖)。对一个大型的电子商务网站，我们需要对用户的购买行为进行分析，需要对用户推荐用户感兴趣的商品，如果把购物车信息保存在Cookie中，则不能对用户购买行为分析统计。

 

我在前端模板中把购物车存到cookie中。

首先：

我进行了封装，把代码封装到js中，

//购物车
var Cart = function () {
this.Count = 0;
this.Total = 0;
this.Items = new Array();
};
//购物车集合对象
var CartItem = function () {
this.Id = 0;
this.Name = "";
this.Count = 0;
this.Price = 0;
};

//购物车操作
var CartHelper = function () {
    this.cookieName = $.cookie('username');
    this.Clear = function () {
        var cart = new Cart();
        this.Save(cart);
        return cart;
    };

    //向购物车添加
    this.Add = function (id, name, count, price) {
        var cart = this.Read();
        var index = this.Find(id);

        if(count==0){
            this.Del(id);

        }else{
            //如果ID已存在，覆盖数量
            if (index > -1) {
                cart.Total -= (((cart.Items[index].Count * 100) * (cart.Items[index].Price * 100)) / 10000);
                cart.Items[index].Count = count;
                cart.Total += (((cart.Items[index].Count * 100) * (cart.Items[index].Price * 100)) / 10000);

            } else {
                var item = new CartItem();
                item.Id = id;
                item.Name = name;
                item.Count = count;
                item.Price = price;
                cart.Items.push(item);
                cart.Count++;
                cart.Total += (((item.Count * 100) * (item.Price * 100)) / 10000);
                // console.log(cart);
                // cart.Total += (((cart.Items[index].Count * 100) * (cart.Items[index].Price * 100)) / 10000);
            }
            cart.Total=Math.round(cart.Total * 100) / 100;
            this.Save(cart);
        }

        return cart;
    };
    //改变数量
    this.Change = function (id, count) {
        var cart = this.Read();
        var index = this.Find(id);
        cart.Items[index].Count = count;
        this.Save(cart);
        return cart;
    };
    //移出购物车
    this.Del = function (id) {
        var cart = this.Read();
        var index = this.Find(id);
        if (index > -1) {
            var item = cart.Items[index];
            cart.Count--;
            cart.Total = cart.Total - (((item.Count * 100) * (item.Price * 100)) / 10000);
            cart.Items.splice(index, 1);
            this.Save(cart);
        }

        return cart;

    };
    //根据ID查找
    this.Find = function (id) {
        var cart = this.Read();
        var index = -1;
        for (var i = 0; i < cart.Items.length; i++) {
            if (cart.Items[i].Id == id) {
                index = i;
            }
        }
        return index;
    };
    //COOKIE操作
    this.Save = function (cart) {
        var source = "";
        for (var i = 0; i < cart.Items.length; i++) {
            if (source != "") { source += "|$|"; }
            source += this.ItemToString(cart.Items[i]);
        }
        $.cookie(this.cookieName, source);
    };
    this.Read = function () {
        //读取COOKIE中的集合
        var source = $.cookie(this.cookieName);
        var cart = new Cart();
        if (source == null || source == "") {
            return cart;
        }
        var arr = source.split("|$|");
        cart.Count = arr.length;
        for (var i = 0; i < arr.length; i++) {
            var item = this.ItemToObject(arr[i]);
            cart.Items.push(item);
            cart.Total += (((item.Count * 100) * (item.Price * 100)) / 10000);
        }
        return cart;
    };
    this.ItemToString = function (item) {
        return item.Id + "||" + escape(item.Name) + "||" + item.Count + "||" + item.Price;
    };
    this.ItemToObject = function (str) {
        var arr = str.split('||');
        var item = new CartItem(); 
        item.Id = arr[0];
        item.Name = unescape(arr[1]);
        item.Count = arr[2];
        item.Price = arr[3];
        return item;
    };
};
//调用
var xc=new CartHelper();
 
 
 
在商品详情页中写了onclick(),并调用js里面的添加购物车逻辑:
    function getcookie(){
xc.Add(id,$('#title').html(),4,$('#price').html());
console.log(xc.Read());
console.log($('#title').html());
}
 
 
在cookie购物车模板中，把数据渲染出来，并调用js:
 
<ul class="cart_list_td clearfix" v-for="(sku,index) in cart" id="porcdesc" >
<span id="pro_list">
 
</span>
</ul>
 
 
 
<script>
 
console.log(xc.Read())
let pro_list = xc.Read();

            var abs = pro_list.Items;

            // alert(abs);SS
 
 
            var username = $.cookie('username');
            // alert(abs[0]["Id"]);
 
            let ul = '';
            for (var i=0;i<abs.length;i++){
                alert("123")
                ul += '<ul class="cart_list_td clearfix" v-for="(sku,index) in cart" id="porcdesc" ><li class="col01"><input type="checkbox" name="product_id"   v-model="sku.selected" @change="update_selected(index)" value="'+abs[i]["Id"]+','+abs[i]["Id"]+','+abs[i]["Name"]+'" onclick="dod()"></li><li class="col02"><img src=""></li><li class="col03" id="prodtit" >'+abs[i]["Name"]+'</li><li class="col05" id="prodpic">'+abs[i]["Price"]+'元</li><li class="col08">'+abs[i]["Count"]+'</li><li id="pkid" value="'+abs[i]["Id"]+'"><a @click="on_delete(index)" onclick="delpro('+abs[i]["Id"]+')">删除</a></li></ul>'}

            ul += '';
            $("#pro_list").html(ul);
 
 
    </script>