javascript 历史记录 经常用于产品最近历史浏览
作者：
在很多购物网站，都有“产品的浏览历史记录”，这是个很贴心的功能。
本文将用js+cookie来实现这一功能，因为最近都在研究jquery，所以也就顺便用上了，如果你不想用jquery，那么你更需要了解实现的过程就可以了，代码自己去写。
需要用到一个jquery的cookie插件，用来操作cookie，连接https://www.jb51.net/article/18276.htm
需要稍微了解json，资料使用json然为了简单，这里假设浏览记录只记录3个。
基本流程如下：
1、如果cookie中记录的历史产品数目为0或1或2，那么直接在cookie中插入。
2、如果cookie中记录的数目为3(因为我们限定了只能记录3个)，那么将第一组记录的去掉，去掉的方法是重新遍历，但不从第一个开始，而从第二个开始，再插入新的历史记录。
准备：
1、我们要存进去cookie的json字符串类似如下：
复制代码 代码如下:
var hisProduct = eval[
{"url":"1.html","imgurl":"1.jpg","proname":"pig1","proprice":100},
{"url":"2.html","imgurl":"2.jpg","proname":"pig2","proprice":200},
{"url":"3.html","imgurl":"3.jpg","proname":"pig3","proprice":300}
];
url：是产品的页面url
imgurl：是图片的url
proname：产品名称
proprice：产品价格
2、如何取得这些信息？下面以京东商城为例子：
我们需要取得的就是上面“黄色区域”部分，还有一个是页面地址。查看其代码，定位到关键部分的代码块如下：
<div class="Product_Name"><h1>惠普（HP）Deskjet D2568 彩色喷墨照片打印机</h1><font color="#FF0000" >劲爆价格 双墨滴打印技术还原照片本色 </font></div>
<div id="Product_BigImage" class="jqzoom" onclick = "window.open('http://www.360buy.com/bigimage.aspx?id=131407')"><img onerror = "this.src='http://www.360buy.com/images/none/none_347.gif'" alt="惠普（HP）Deskjet D2568 彩色喷墨照片打印机" src="http://img10.360buy.com/S1/809/8b2bf92f-74f9-46c2-929d-f47fa6fce2d1.jpg" width="349" jqimg="http://img10.360buy.com/S0/809/8b2bf92f-74f9-46c2-929d-f47fa6fce2d1.jpg"/></div
京东的价格是做成图片的：
<ul class="Pro_baseinfo"><li><em class="grey">商品编号：131407</em></li><li>市 场 价：<em class="m_line">￥499.00</em></li><li>京 东 价：<img onerror = "this.src='http://www.360buy.com/images/no2.gif'" src ="http://price.360buy.com/P7EDAD82DC8D8212393096333144388F6,3.png"/><a target="_blank" class="link_1" href="http://jd2008.360buy.com/notify.aspx?id=131407&type=1&key=7EDAD82DC8D8212393096333144388F6"">(降价通知我)</a>
用jquery取得我们需要的信息：
复制代码 代码如下:
$(function(){
var pro_url = document.URL;//页面地址
var pro_name = $(".Product_Name h1").text();//产品名称
var pro_img = $("#Product_BigImage img")[0].src;//图片路径
var pro_price = $(".Pro_baseinfo li").eq(2).children("img")[0].src;//价格
})
补充：这里京东的比较复杂一点，而我们如果是自己写的程序可以给一个要获取的元素一个id。
演示获取(请“运行代码”后刷新一次)：
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
下面通过代码讲解：
复制代码 代码如下:
$(function(){//ready后再获取
//第一步取得需要写入cookie的内容
var pro_url = document.URL;//页面地址
var pro_name = $(".Product_Name h1").text();//产品名称
var pro_img = $("#Product_BigImage img")[0].src;//图片路径
var pro_price = $(".Pro_baseinfo li").eq(2).children("img")[0].src;//价格
var canAdd = true;//默认可以插入
//第二步，取得cookie并取得已有历史记录产品数目,对于cookie的操作，这里用了jquery的一个插件，你不喜欢，可以用自己的
var hisProduct = $.cookie('hisProduct');
var len = 0;
if(hisProduct){
hisProduct = eval('('+hisProduct+')');//静普通字符串转换成json
len = hisProduct.length;
}
//第三步，判断当前页面的产皮是否已经在记录中，用产品名称去比较
$(hisProduct).each(function(i){
if(this.proname == pro_name){
canAdd = false;//已经存在
return;
}
})
//第四步，可以添加的话。
if(canAdd){
var temp = "[";
var startNum = 0;
if(len > 2){startNum = 1;}//如果已经记录产品>2，前面说了，最多3个产品，所以这里其实是3，那么不需要第一个产品的记录
for(var m = startNum;m < len;m++){
temp = temp + "{\"url\":\""+hisProduct[m].url+"\",\"imgurl\":\""+hisProduct[m].imgurl+"\",\"proname\":\""+hisProduct[m].proname+"\",\"proprice\":\""+hisProduct[m].proprice+"\"},";
}
temp = temp + "{\"url\":\""+url_+"\",\"imgurl\":\""+imgurl_+"\",\"proname\":\""+proname_+"\",\"proprice\":\""+proprice_+"\"}]";
$.cookie("hisProduct",temp,{ expires:1});//ie6下是否有写入
}
//第五步，OK，输出吧
var newtemp = eval('('+$.cookie("hisProduct")+')');
var newtemp_ = "";
for(var n = newtemp.length - 1;n > -1;n--){//这里你可以输出为自己要的格式
newtemp_ = newtemp_ + "<li><p><a target='_blank' href='"+newtemp[n].url+"'><img src='"+newtemp[n].imgurl+"' \/><\/a></p>";
newtemp_ = newtemp_ + "<p><a target='_blank' href='>"+newtemp[n].url+"'>"+newtemp[n].proname+"<\/a><\/p>";
newtemp_ = newtemp_ + "<p class='pc'>"+newtemp[n].proprice+"<\/p><\/li>";
}
$("#prohistory").html(newtemp_);//我输出到prohistory这个div里面
})