正在开发一个b2c的国外商城,昨天做了一个历史浏览记录发出来跟大家分享一下.

JS:

//cookie相关函数
function getCookieVal(offset) {
    var endstr = document.cookie.indexOf(";", offset);
    if (endstr == -1) endstr = document.cookie.length;
    return unescape(document.cookie.substring(offset, endstr));
}
function getCookie(name) {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg) return getCookieVal(j);
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break;
    }
    return null;
}
function setCookie(name, value) {
    var exp = new Date();
    exp.setTime(exp.getTime() + 3600000000);
    document.cookie = name + "=" + value + "; expires=" + exp.toGMTString();
}
function glog(evt) {
    var evt = evt ? evt : window.event;
    var srcElem = (evt.target) ? evt.target : evt.srcElement;
    try {
        while (srcElem.parentNode && srcElem != srcElem.parentNode) {
            if (srcElem.tagName && srcElem.tagName.toUpperCase() == "A") {
                addressCookie = srcElem.href;
                var ProductId = addressCookie.substr(addressCookie.indexOf("id=") + 3);
                var imgUrl = document.getElementById("img_" + ProductId + "").src;
                var productNameTitle = document.getElementById("Name_" + ProductId + "").text;
                var productName;
                if (productNameTitle.length > 28) {
                    productName = productNameTitle.substr(0, 25) + "...";
                }
                else {
                    productName = productNameTitle;
                }
                var productPrice = document.getElementById("Price_" + ProductId + "").textContent;
                address = srcElem.href + "+" + ProductId + "+" + imgUrl + "+" + productNameTitle + "+" + productName + "+" + productPrice + "|";
                wlink = address;
                old_info = getCookie("history_info");
                var insert = true;
                if (old_info == null) {//判断cookie是否为空
                    insert = true;
                }
                else {
                    var old_link = old_info.split("|");
                    for (var j = 0; j <= 5; j++) {
                        if (old_link[j].indexOf(addressCookie) != -1) //存在这个cookie
                            insert = false;
                        if (old_link[j] == "null")
                            break;
                    }
                }
                if (insert) {
                    wlink += getCookie("history_info");
                    setCookie("history_info", wlink);
                    history_show().reload();
                    break;
                }
                else {
                    var old_link1 = old_info.split("|");
                    var length = old_link1.length;
                    var newcookie = '';
                    for (var j = 0; length <= 6 ? j <= length - 1 : j <= 5; j++) {
                        if (old_link1[j].indexOf(addressCookie) == -1) {
                            if (j == length - 1 || j == 5) {
                                newcookie = newcookie + old_link1[j]
                            }
                            else {
                                newcookie = newcookie + old_link1[j] + '|'
                            }
                        }

}
                    newcookie = wlink + newcookie
                    setCookie("history_info", newcookie);
                    history_show().reload();
                    break;
                }
            }
            srcElem = srcElem.parentNode;
        }
    }
    catch (e) { }
    return true;
}

function history_show() {
        var history_info = getCookie("history_info");
        if (history_info != null) {
            history_arg = history_info.split("|");
            var content = "";
            for (var i = 0; history_arg.length >= 6 ? i<=5 : i<=history_arg.length - 1; i++) {
                if (history_arg[i] != "null") {
                    historyArry = history_arg[i].split("+");
                    content += "<li><div class=\"products_scan_pic\"><a onclick=\"glog(event)\" href=\"ProductsInfo.aspx?id=" + historyArry[1] + "\"><img id=\"img_" + historyArry[1] + "\" src=\"" + historyArry[2] + "\" onerror=\"javascript:this.src='images/Product/nophoto.jpg'\" width=\"47\" height=\"47\" /></a></div><div class=\"products_scan_txt\"><a href=\"ProductsInfo.aspx?id=" + historyArry[1] + "\" onclick=\"glog(event)\" id=\"Name_" + historyArry[1] + "\" title=\"" + historyArry[3] + "\">" + historyArry[4] + "</a><br/><div id=\"Price_" + historyArry[1] + "\"><div class=\"products_seller_t2\">" + historyArry[5] + "</div></div></div></li>";
                }
            }
            document.getElementById("history").innerHTML = content;
        }
    else {
        document.getElementById("history").innerHTML = "<span style=\"color:#DE8500\">You have no recently viewed items or searches</span>";
    }
}

//清空cookies
function ClearHistory() {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    document.cookie = "history_info=;expires=" + exp.toGMTString() + "";
    document.getElementById("history").innerHTML = "<span style=\"color:#DE8500\">Cleared view history successfully</span>";
}

前台调用方式:

<script type="text/javascript" defer="defer">history_show();</script>

效果图:

清除历史浏览记录:

<div class="products_scan_title"><span><a href="#" onclick="ClearHistory()">Clear History</a></span>Your last viewed items</div>

在这个项目之前我开发了一个类似"暴走漫画"搞笑图片制作的网站,现在网上很流行的搞笑图片,大多都来自那个网站,它的图片制作是用flash制作的,由于公司的某些策划和原因,我用asp.net开发了一个类似的,不过总感觉有瑕疵,这也是程序和flash的区别,无解!!.     网址:www.banmx.com    也希望有懂Gid.用asp.net开发过类似项目的朋友能给点意见. QQ357253950

JS制作一个通用的商城版历史浏览记录的更多相关文章

  1. php中如何实现网上商城用户历史浏览记录的代码

    /如是COOKIE 里面不为空,则往里面增加一个商品ID if (!empty($_COOKIE['SHOP']['history'])){ //取得COOKIE里面的值,并用逗号把它切割成一个数组 ...

  2. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  3. 用JS制作一个信息管理平台完整版

      前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 ...

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

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

  5. Django之使用redis缓存session,历史浏览记录,首页数据实现性能优化

    Redis缓存session 配置Django缓存数据到redis中 # diango的缓存配置 CACHES = { "default": { "BACKEND&quo ...

  6. Redis添加历史浏览记录

    参考资料 http://redisdoc.com/index.html http://redis-py.readthedocs.io/en/latest/#indices-and-tables 1.什 ...

  7. position:搜索框显示历史浏览记录

    absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "righ ...

  8. destoon系统开发-最新利用浏览器的cookie 做历史浏览记录

      注意: 代码 放在要显示的为 (一般放在详情页),注意本教程不入库,直接利用浏览器的 cookie 缓存判断    <!--历史浏览记录 S--> <div class=&quo ...

  9. JS制作一个创意数字时钟

    通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...

随机推荐

  1. iOS多线程的初步研究(一)-- NSThread

    对于多线程的开发,iOS系统提供了多种不同的接口,先谈谈iOS多线程最基础方面的使用.产生线程的方式姑且分两类,一类是显式调用,另一类是隐式调用. 一.显示调用的类为NSThread.一般构造NSTh ...

  2. 我眼中的PageRank算法详解

    随着互联网的发展,网络上已有的网页数量庞大,并且每天都会有很多网页发布,如何权衡这些重要度的排名是一个很重要的问题.我们今天就来了解一下PageRank算法. 首先我们要来了解一下图的概念,请看图1. ...

  3. Linux修改时间的方法

    http://www.blogjava.net/itvincent/archive/2007/08/03/134242.html修改linux的时间可以使用date指令 在命令行输入: date 显示 ...

  4. AAAA block

    [self AAAA:^(BOOL isSuccessed, id userInfo, NSString *errorMsg) { NSLog(@"AAAA: %d, userInfo: % ...

  5. Archive将多个对象归档到同一个文件

    使用archiveRootObject:toFile:方法能够将一个对象直接写入到一个文件里.但有时候可能想将多个对象写入到同一个文件里,那么就要使用NSData来进行归档对象. NSData能够为一 ...

  6. log4j DatePattern 解惑

    og4j.appender.Root=org.apache.log4j.DailyRollingFileAppenderlog4j.appender.Root.File=../logs/bloglog ...

  7. 图解PCIE原理(从软件角度)

    1  PCIE基本概念 1.1   PCIE拓扑架构图 1.2 PCIE Switch内部结构图 1.3  PCIE协议结构图 2 PCIE枚举原理 2.1 Type0&Type1配置头空间 ...

  8. maven+nexus setting.xml配置(收藏)

    <?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://mav ...

  9. 搭建hadoop集群,

    这个教程是2.4.1的 ,但是亲测对于2.6.5,是可以用的,对2.5.4应该也是支持的 1.准备Linux环境 1.0先将虚拟机的网络模式选为NAT 1.1修改主机名 vi /etc/sysconf ...

  10. 作为一个Linux/Unix程序员有哪些要求

    C程序开发: 熟悉数据库sql语言: 熟练掌握C语言(面向过程的),掌握C++(面向对象的) 工程管理工具:make,会写Makefile 熟悉IBM DB2.Informix.Sysbase.SQL ...