为什么不存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>
 

购物车存到cookie的更多相关文章

  1. jQuery切换网页皮肤保存到Cookie实例

    效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/25.htm 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//D ...

  2. 个人学习记录1:二维数组保存到cookie后再读取

    二维数组保存到cookie后再读取 var heartsArray = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0],[0,0, ...

  3. 将用户信息保存到Cookie中

    /** * 把用户保存到Cookie * * @param request * @param response * @param member */ private void rememberPwdA ...

  4. jQuery切换网页皮肤并保存到Cookie示例代码

    经过使用,靠谱! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  5. 通过设置PHPSESSID保存到cookie实现免登录

    $cookieParams = session_get_cookie_params(); session_set_cookie_params( 3600,// 设置sessionID在cookie中保 ...

  6. 监听页面中的某个div的滚动事件,并将其滚动距离保存到cookie

    在html中,写一个id为type的div: <div class="type" id="type"></div> css: .type ...

  7. taotao购物车2 解决购物车本地cookie和服务器redis不同步的问题

    下面的思路逻辑一定要理清楚,比较绕 思路; 前面已经实现了在cookie本地维护购物车的功能, 这次加入和服务器同步功能, 因为 购物车 操作比较频繁,所以,后台服务器 用redis存储用户的购物车信 ...

  8. 购物车非cookie版

    2015.11.26购物车,非cookie版 [点击来,你发现被骗了(笑哭,笑哭,笑哭,源代码的话,留下邮箱吧,是在不好找这一时半会儿的.)] Jsp通过反射机制获取bean中的标签,但其实,可以没有 ...

  9. 浅谈购物车中cookie的使用

    购物车对于电商网站来说是一个非常重要的模块.最近自己的项目中也用到了,所以拿出来说说事! 购物车是用户选择商品的一个缓存的地方.其中包含了商品的基本信息,例如:商品的描述,商品的价格,商品的数量等等. ...

随机推荐

  1. ARM基础

    ARM汇编:(APCS过程调用标准) 汇编:用助记符(如$ # .)代替操作码,用地址符号或标签代替地址码的编程语言 特点: 优点:可以直接访问硬件,目标代码简短,执行速度快(CPU启动时需要直接操作 ...

  2. Java基础学习-Path环境变量的配置

    1.为什么要进行Path环境变量的配置       程序的编译和执行需要使用到javac和java命令,所以只能在bin目录下写程序,而实际开发中,我们不可能将程序全部写到bin目录下,所以我们不许让 ...

  3. redux-thunk的理解

    问题:1.redux-thunk要解决什么问题? 要解决异步请求问题,Action发出以后,Reducer立即算出State,这叫做同步:Action发出以后,过一段时间再执行 Reducer,这就叫 ...

  4. 伪分布式安装core-site.xml和hdfs-site.xml配置文件

    hadoop的伪分布式安装流程如下所示: 其中core-site.xml和hdfs-site.xml是两个很重要的配置文件. core-site.xml <configuration> & ...

  5. U3D外包团队:五款IDE推荐!

    1. Jetbrains RubyMine RubyMine是由捷克Jetbrains公司开发的,目前可提供使用的版本有RubyMine 5.4.而且RubyMine 5.4同时也为Rails 4的发 ...

  6. _rank

    命令 ._add rank 1000 自定义等级 `level` 等级 `name`等级描述 `prefix` 前缀名称 `gossipText` 菜单显示 `meetValue` 达到值就升级 `r ...

  7. 使用python内置库pytesseract实现图片验证码的识别

    环境准备: 1.安装Tesseract模块 git文档地址:https://digi.bib.uni-mannheim.de/tesseract/ 下载后就是一个exe安装包,直接右击安装即可,安装完 ...

  8. xss攻击(转)

    什么是 XSS Cross-Site Scripting(跨站脚本攻击)简称 XSS,是一种代码注入攻击.攻击者通过在目标网站上注入恶意脚本,使之在用户的浏览器上运行.利用这些恶意脚本,攻击者可获取用 ...

  9. JxBrowser之二:常用函数addLoadListener

    1.常用函数addLoadListener,包含对页面加载状态的多种监控回调. browser.addLoadListener(new LoadAdapter() { @Override public ...

  10. 【linux总结】zsl

    extundelete [root@xuegod63 ~]# lsof -p 43641 #一般用于查看木马进程,在读哪些文件 [root@xuegod63 ~]# lsof -i :22 #用于查看 ...