用JS中的cookie实现商品的浏览记录
最近在做一个购物车效果,为了实现商品的浏览记录效果可是让我百般周折,避免以后忘记特写此随笔与大家共享,希望博友们看后有所收获。
第一步:在一个公用的js文件下getCookie(“liulan”),cookie名字可以随便起,然后在判断是否存在此cookie,不存在的话创建此cookie,存在的话将次cookie赋给window.liu(整个窗口唯一的变量)。代码如下:
var l = getCookie("liulan"); if(l){window.liu = l }else{setCookie("liulan",[ ],10);}
第二步:将第一步中的js文件引入到商品页,引入完后在商品页判断是否存在window.liu,如果存在window.liu(此时的liu是一个数组)判断liu的长度是否大于0,如果大于0就创建一个数组并且循环遍历liu,将liu的每一项添加到数组中且动态创建记录的商品显示到该加载的地方。代码如下:
if(window.liu){
var liu = window.liu;
if(liu.length>0){
var arrObj = [ ];
for(var j=liu.length-1; j>=0; j--){
var l = liu[ j ];
arrObj.push("<li id=' "+l.id+" '><img src='img/"+l.img+" '/><h4>¥"+l.price+"元/件</h4><span>"+l.title+"</span></li>");
}
$('ol').html(arrObj.join(""));//显示加载的时候以空字符分开
$('li','ol').click(function(){ });//给每个li设置点击事件
}
}
第三步:当浏览商品时给商品添加一个事件。先用getCookie得到浏览过商品的对象(点击后即浏览),判断此cookie和liu是否都存在,如果都存在遍历liu的每一项如果liu的一条数据中有一项的id和商品的id相同则不让此条cookie加到liu中,然后创建setCookie("liulian",liu),如果此cookie和liu不同时存在就setCookie("j"+obj.id,obj,10)。代码如下:
a.onclick=function(){
var o = getCookie("j"+obj.id);
if( o && liu){
var f = true;
$(liu).each(function(i,item){
if(item.id==o.id) f = false;
});
if ( f ){
if (liu.length >= 5) liu.splice(0,1);
liu.push(o);
}
setCookie("liulan",liu);
document.location.href = "show.html?id="+obj.id;
}else{
setCookie("j"+obj.id,obj,10);
document.location.href="show.html?id="+obj.id;
}
};
注:若代码有误欢迎大神多多指正。
用JS中的cookie实现商品的浏览记录的更多相关文章
- 【原创】js中利用cookie实现记住密码功能
在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse res ...
- 使用Cookie实现用户商品历史浏览记录
该功能分为四个模块: 1. 获取所有商品并以链接的形式显示 out.write("网站商品: <br/>"); Map<String, Book> book ...
- 在node.js中使用COOKIE
node.js中如何向客户端发送COOKIE呢?有如下两个方案: 一.使用response.writeHead,代码示例: //设置过期时间为一分钟 var today = new Date(); v ...
- js中的cookie使用
在网上找到的资料,收藏一下 function getCookies(name) { var arr = document.cookie.match(new RegExp("(^| )&quo ...
- js 中的cookie
根据智能社31cookie基础与应用总结, cookie的特性: 1.同一个网站,共用一套cookie,实际上是根据域名来区分的. 如t.sina.com.cn ,和weibo.com这两个都是新浪微 ...
- 在jsp页面的js中使用Cookie的原理介绍以及相应方法的代码
1. 设置cookie 1.1 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="user_Id=828&q ...
- js中对cookie的操作及json数据与cookie结合的用法
cookie的使用 添加cookie 添加cookie:document.cookie = “key=value”; // 一次写入一个键值对 document.cookie = 'test1=hel ...
- 回顾js中的cookie/localstorage
1.首先简单总结下cookie cookie:可以做会话跟踪 特点: 1.大小限制(不能超过4k) 2.每个域下cookie不能超过50个 3.有效期(和设定时间有关), ...
- js中的cookie
cookie就是一个存放数据的东西,存储量很小4kb,存放在客户端上和应用设备上. 应用场景 用户注册,用户登录,购物车. Chrome浏览器在计算机中存放cookie的位置 C:\Users\Adm ...
随机推荐
- jqGrid的editrules参数
原文链接:http://blog.csdn.net/mengtianyalll/article/details/13502841 editrules editrules是用来设置一些可用于可编辑 ...
- 再次建立wordpress
山大的火星人的站还在维护www.h4ck.org.cn. 也许是募课潮过后的效应,www时代还能聚合很多知识,到了客户端时代技术越发松散,很难发实用的技术总结. 如果重新审视问题不难发现,问题在于使用 ...
- BZOJ 2141 排队(CDQ分治)
我们把每一次交换看做两个插入两个删除.然后就是一个三维偏序.时间一维,下标一维,权值一维. #include<iostream> #include<cstring> #incl ...
- [HDU5685]2016"百度之星" - 资格赛 Problem A
题目大意:给你一个字符串,和一些问题,每个问题问你[l,r]子串的哈希值是多少. 哈希值计算方法为:$H(s)=\prod _{i=1} ^{i\leq len(s)}(s_i-28)(mod\ 99 ...
- python yield 生成器的介绍(转载)
您可能听说过,带有 yield 的函数在 Python 中被称之为 generator(生成器),何谓 generator ? 我们先抛开 generator,以一个常见的编程题目来展示 yield ...
- maven使用技巧
转:MAVEN常用命令 Maven库: http://repo2.maven.org/maven2/ Maven依赖查询: http://mvnrepository.com/ Maven常用命令: 1 ...
- parted 4T磁盘
parted /dev/vdg mklabel gpt mkpart primary ext4 0% 100%
- 紫书 习题 8-23 UVa 1623 (set妙用 + 贪心)
这道题我是从样例中看出思路了 2 4 0 0 1 1 看这组数据, 输出的是No, 为什么呢?因为两个1之间没有神龙喝水, 所以一定会有水灾. 然后就启发了我,两次同一个湖的降水之间必须至少有一次神龙 ...
- [luogu] P4514 上帝造题的七分钟 (树状数组,二维差分)
P4514 上帝造题的七分钟 题目背景 裸体就意味着身体. 题目描述 "第一分钟,X说,要有矩阵,于是便有了一个里面写满了0的n×m矩阵. 第二分钟,L说,要能修改,于是便有了将左上角为(a ...
- pandas学习笔记 - 文件的写入和输出
# -*- coding: utf-8 -*- """ Created on Tue Aug 28 22:19:26 2018 @author: Dev " ...