使用cookie实现购物车功能

手上的一个项目之前采用的是数据库，根据用户编号来记录购物车数据，但是因为允许同一个账号重复登录，同时购买商品时就会出现数据不一致的情况，所以改为cookie比较合适

客户端代码

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

function GetCartObject() {

    var cart = GetShoppingCart(GetCarNo(),$("#hidUserID").val())

    var sCart = new shoppingCart();

    if (cart == null || cart == "") {
        return sCart;
    }
    var arr = cart.split("*");
     

    for (var i = 0; i < arr.length; i++) {
        var item = this.ItemToObject(arr[i]);
        sCart.Items.push(item);
        sCart.Count += parseInt(item.Count);
        //cart.Total += item.Price * item.Count;
    }
    return sCart;
}

this.ItemToObject = function (str) {
    var arr = str.split('|');
    var item = new CartItem();
    item.productId = arr[0];
    item.Count = arr[1];
    return item;
};

function AddShoppingCart(carNo, userid, productid, num) {

}

function DeleteShoppingCart(userid, productid) {

    var carNo = GetCarNo();

    var cart = GetShoppingCart(carNo, userid)

    if (cart == null || cart == 'undefined') {
        return;
    }

    var pid, num, itemInfo, quantity;

    var cartItems = cart.split('*');
    for (var i = 0; i < cartItems.length; i++) {
        itemInfo = cartItems[i].split('|');
        pid = itemInfo[0];
        quantity = itemInfo[1];
        if (pid == productid) {
            break;
        }
    }

    //有购物车，没有商品
    if (pid == "undefined") {
        return;
    }

    //更新cookie,删除商品
    cart = cart.replace(pid + '|' + quantity, '')    

    //删除最后一个*号和当中连在一起的**号
    cart = DeleteLastSpecailChar(cart, '*')

    $.cookie('sc' + userid + carNo, null, { path: '/' });
    $.cookie('sc' + userid + carNo, cart, { path: '/' });

}

function DeleteAllShoppingCart(userID) {
    $.cookie("carNo", null, { path: '/' });
    $.cookie("sc" + userID + GetCarNo(), null, { path: '/' });
}

function UpdateShoppingCart(userid, productid, num) {

    var carNo = GetCarNo();
    var cart = GetShoppingCart(carNo, userid)

    //第一次添加购物车
    if (cart == null || cart == undefined) {
        $.cookie('sc' + userid + carNo, productid + '|' + num, { path: '/' });
        return;
    }

    var pid, num, itemInfo, quantity, newItemInfo,newProduct;

    var cartItems = cart.split('*');
    for (var i = 0; i < cartItems.length; i++) {
        itemInfo = cartItems[i].split('|');
        pid = itemInfo[0];
        quantity = itemInfo[1];
        if (pid == productid) {
            newProduct=1
            break;
        }
    }

    //有购物车，没有商品，添加该商品
    if (newProduct == null || newProduct == undefined) {
        $.cookie('sc' + userid + carNo, cart + '*' + productid + '|' + num, { path: '/' });
        return;
    }

    //删除这个商品
    if (num==0) {
        newItemInfo = '';
    }
    //修改数量
    else {
        newItemInfo = pid + '|' + num;
    }
    
    cart = cart.replace(pid + '|' + quantity, newItemInfo)

    //删除最后一个*号

    cart =DeleteLastSpecailChar(cart, '*')

    //更新cookie
    $.cookie('sc' + userid + carNo, null, { path: '/' });
    $.cookie('sc' + userid + carNo, cart, { path: '/' });
}

function GetShoppingCart(carNo, userid) {
    if (carNo == null || carNo == undefined) {
        carNo = GetCarNo()
    }
    var cart = $.cookie('sc' + userid + carNo);
    return cart;
}

function CreateNo() {

    //购物车编号，用时间戳表示，为了区分一个账号重复登录购买相同商品的情况
    var carNo = Date.parse(new Date());
    //删除原来的cookie
    $.cookie("carNo", null, { path: '/' });
    $.cookie("carNo", carNo,{ path: '/' });
    return carNo
}

function GetCarNo() {
    var carNo = $.cookie("carNo");
    if (carNo == null) {
        return CreateNo();
    }

    return carNo;
}


function DeleteLastSpecailChar(str,charToDel) {

    var endChar = str.substring(str.length - 1, str.length)

    var startChar = str.substring(0, 1)

    //去掉最后一个特殊字符，
    if (endChar == charToDel)
        return str.substring(0, str.lastIndexOf(charToDel));
    //去掉第一个特殊字符，
    else if (startChar == charToDel)
        return str.substring(1, str.length);
    //修改连在一起的2个特殊字符为1个
    else
        return str.replace(charToDel + charToDel, charToDel);
}

购物车帮助类

服务端代码

 public async Task<List<ShoppingCartInfo>> GetShoppingCartFromCookie(string userid="")
        {
            StringBuilder pidList = new StringBuilder();
            Dictionary<int, int> productsInCookie = new Dictionary<int, int>();

            var cookieKeys = HttpContext.Request.Cookies.AllKeys;
            var cookies = HttpContext.Request.Cookies;
            string cartNo = Server.UrlDecode(cookies["carNo"]?.Value.ToString());

            string cartkey = $"sc{SessionUserInfo.UserID??userid}{cartNo}";
            string shoppingCart = Server.UrlDecode(cookies[cartkey]?.Value.ToString());

            if (string.IsNullOrEmpty(cartNo) || string.IsNullOrEmpty(shoppingCart))
            {
                return new List<ShoppingCartInfo>();
            }

List<ShoppingCartInfo> cartInfo = new List<ShoppingCartInfo>();

            foreach (string product in shoppingCart.Split('*'))
            {
                var items = product.Split('|');
                if (items != null && items.Length > 0)
                {
                    pidList.AppendFormat("{0},", items[0]);
                    productsInCookie.Add(items[0].ToInt(),items[1].ToInt());
                    ShoppingCartInfo car = new ShoppingCartInfo ();
                    cart.productid=items[0];
                    cart.num=items[1];
                    cart.price=items[2];
                    cartInfo.add(cart);
                }
            }
            return cartInfo;
        }

        public void DeleteShoppingCart(string shoppingCartProductIDs = null,string userID="")
        {
            string userid = SessionUserInfo.UserID??userID;

            var cookies = HttpContext.Request.Cookies;
            string cartNo = Server.UrlDecode(cookies["carNo"]?.Value.ToString());

            //删除cookie
            HttpCookie cookie = Request.Cookies[$"sc{userid}{cartNo}"];
            cookie.Expires = DateTime.Now.AddDays(-1);
            cookie.Path = "/";
            HttpContext.Response.Cookies.Add(cookie);

        }          

view code

注意：

　　    1.服务端删除cookie的时候，从request获取cookie，然后添加到response中，来使客户端cookie过期

           2.设置cookie时（包括删除），设置路径为‘/’，不设置的话仅仅对当前页面有效。

参考：https://blog.csdn.net/weixin_44266137/article/details/89158498