最近在做一个购物车效果,为了实现商品的浏览记录效果可是让我百般周折,避免以后忘记特写此随笔与大家共享,希望博友们看后有所收获。

第一步:在一个公用的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实现商品的浏览记录的更多相关文章

  1. 【原创】js中利用cookie实现记住密码功能

    在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse res ...

  2. 使用Cookie实现用户商品历史浏览记录

    该功能分为四个模块: 1. 获取所有商品并以链接的形式显示 out.write("网站商品: <br/>"); Map<String, Book> book ...

  3. 在node.js中使用COOKIE

    node.js中如何向客户端发送COOKIE呢?有如下两个方案: 一.使用response.writeHead,代码示例: //设置过期时间为一分钟 var today = new Date(); v ...

  4. js中的cookie使用

    在网上找到的资料,收藏一下 function getCookies(name) { var arr = document.cookie.match(new RegExp("(^| )&quo ...

  5. js 中的cookie

    根据智能社31cookie基础与应用总结, cookie的特性: 1.同一个网站,共用一套cookie,实际上是根据域名来区分的. 如t.sina.com.cn ,和weibo.com这两个都是新浪微 ...

  6. 在jsp页面的js中使用Cookie的原理介绍以及相应方法的代码

    1. 设置cookie 1.1 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="user_Id=828&q ...

  7. js中对cookie的操作及json数据与cookie结合的用法

    cookie的使用 添加cookie 添加cookie:document.cookie = “key=value”; // 一次写入一个键值对 document.cookie = 'test1=hel ...

  8. 回顾js中的cookie/localstorage

    1.首先简单总结下cookie cookie:可以做会话跟踪 特点:      1.大小限制(不能超过4k)      2.每个域下cookie不能超过50个      3.有效期(和设定时间有关), ...

  9. js中的cookie

    cookie就是一个存放数据的东西,存储量很小4kb,存放在客户端上和应用设备上. 应用场景 用户注册,用户登录,购物车. Chrome浏览器在计算机中存放cookie的位置 C:\Users\Adm ...

随机推荐

  1. jqGrid的editrules参数

    原文链接:http://blog.csdn.net/mengtianyalll/article/details/13502841 editrules    editrules是用来设置一些可用于可编辑 ...

  2. 再次建立wordpress

    山大的火星人的站还在维护www.h4ck.org.cn. 也许是募课潮过后的效应,www时代还能聚合很多知识,到了客户端时代技术越发松散,很难发实用的技术总结. 如果重新审视问题不难发现,问题在于使用 ...

  3. BZOJ 2141 排队(CDQ分治)

    我们把每一次交换看做两个插入两个删除.然后就是一个三维偏序.时间一维,下标一维,权值一维. #include<iostream> #include<cstring> #incl ...

  4. [HDU5685]2016"百度之星" - 资格赛 Problem A

    题目大意:给你一个字符串,和一些问题,每个问题问你[l,r]子串的哈希值是多少. 哈希值计算方法为:$H(s)=\prod _{i=1} ^{i\leq len(s)}(s_i-28)(mod\ 99 ...

  5. python yield 生成器的介绍(转载)

    您可能听说过,带有 yield 的函数在 Python 中被称之为 generator(生成器),何谓 generator ? 我们先抛开 generator,以一个常见的编程题目来展示 yield ...

  6. maven使用技巧

    转:MAVEN常用命令 Maven库: http://repo2.maven.org/maven2/ Maven依赖查询: http://mvnrepository.com/ Maven常用命令: 1 ...

  7. parted 4T磁盘

    parted /dev/vdg mklabel gpt mkpart primary ext4 0% 100%

  8. 紫书 习题 8-23 UVa 1623 (set妙用 + 贪心)

    这道题我是从样例中看出思路了 2 4 0 0 1 1 看这组数据, 输出的是No, 为什么呢?因为两个1之间没有神龙喝水, 所以一定会有水灾. 然后就启发了我,两次同一个湖的降水之间必须至少有一次神龙 ...

  9. [luogu] P4514 上帝造题的七分钟 (树状数组,二维差分)

    P4514 上帝造题的七分钟 题目背景 裸体就意味着身体. 题目描述 "第一分钟,X说,要有矩阵,于是便有了一个里面写满了0的n×m矩阵. 第二分钟,L说,要能修改,于是便有了将左上角为(a ...

  10. pandas学习笔记 - 文件的写入和输出

    # -*- coding: utf-8 -*- """ Created on Tue Aug 28 22:19:26 2018   @author: Dev " ...