当前位置：首页 > 资讯 > 技术文档

javascript 历史记录经常用于产品最近历史浏览第1/2页

时间：2021-03-21 23:05 编辑：来源：阅读：
扫一扫，手机访问

摘要：javascript 历史记录经常用于产品最近历史浏览第1/2页

[img]http://files.jb51.net/upload/20090526021738879.gif[/img]
本文将用js+cookie来实现这一功能，因为最近都在研究jquery，所以也就顺便用上了，如果你不想用jquery，那么你更需要了解实现的过程就可以了，代码自己去写。
需要用到一个jquery的cookie插件，用来操作cookie，连接[url=http://www.1sucai.cn/article/18276.htm]http://www.1sucai.cn/article/18276.htm[/url]
需要稍微了解json，资料使用json然为了简单，这里假设浏览记录只记录3个。
[b]基本流程如下：[/b]
1、如果cookie中记录的历史产品数目为0或1或2，那么直接在cookie中插入。
2、如果cookie中记录的数目为3(因为我们限定了只能记录3个)，那么将第一组记录的去掉，去掉的方法是重新遍历，但不从第一个开始，而从第二个开始，再插入新的历史记录。

准备：
1、我们要存进去cookie的json字符串类似如下：

[url=http://jd2008.360buy.com/notify.aspx?id=131407&type=1&key=7EDAD82DC8D8212393096333144388F6]
用jquery取得我们需要的信息：

[u]复制代码[/u][/url] 代码如下:

$(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。

演示获取(请“运行代码”后刷新一次)：

<div class="Product_Name"><h1>惠普（HP）Deskjet D2568 彩色喷墨照片打印机</h1><font color="#FF0000">劲爆价格 双墨滴打印技术还原照片本色 </font></div> 
<div id="Product_Intro_Left"><div class="jqzoom" id="Product_BigImage" onclick="window.open('http://www.360buy.com/bigimage.aspx?id=131407')">[img]http://img10.360buy.com/S1/809/8b2bf92f-74f9-46c2-929d-f47fa6fce2d1.jpg[/img]
</img></div>

<div id="Product_LittleImage">[list][*][img]http://img10.360buy.com/S5/809/8b2bf92f-74f9-46c2-929d-f47fa6fce2d1.jpg[/img]
</img>[/*][*][img]http://img10.360buy.com/S5/666/f09867dc-5d54-4f54-ba39-a8715a28184a.jpg[/img]
</img>[/*][*][img]http://img10.360buy.com/S5/806/d905fdde-1233-4f98-9913-ff68399b38b0.jpg[/img]
</img>[/*][*][img]http://img10.360buy.com/S5/630/f88e199a-2081-46cb-8bd9-f8dee793f370.jpg[/img]
</img>[/*][*][img]http://img10.360buy.com/S5/488/295a077c-343c-451b-8d78-91fb80e197db.jpg[/img]
</img>[/*][/list]</div><div id="Product_Opp">[img]http://www.360buy.com/images/zoom.gif[/img]
</img>  [url=http://www.360buy.com/bigimage.aspx?id=131407]点此查看大图[/url]</div></div> 
                 
                <div id="Product_Intro_Right"> 
    [list] 
    [*][i]商品编号：131407[/i][/*] 
[*]市 场 价：[i]￥499.00[/i][/*] 
[*]京 东 价：[img]http://price.360buy.com/P7EDAD82DC8D8212393096333144388F6,3.png[/img]
</img>[/*] 
[/list] 
</div>[url=http://www.1sucai.cn]编程素材网[/url]

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

当前1/2页 [b]1[/b][url=http://www.1sucai.cn/article/18278_2.htm]2[/url][url=http://www.1sucai.cn/article/18278_2.htm]下一页[/url][url=http://www.1sucai.cn/article/18278_all.htm]阅读全文[/url]

[b]Tags：[/b][url=http://common.jb51.net/tag/javascript/1.htm]javascript[/url] [url=http://common.jb51.net/tag/%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95/1.htm]历史记录[/url]