This article will use Js+cookie to implement this function, because the recent study of jquery, so it is also used, if you do not want to use jquery, then you need to understand the process of implementation can be, the code to write themselves.
Need to use a jquery cookie plugin to manipulate cookies and connect http://www.jb51.net/article/18276.htm
You need to know a little bit about JSON, and the data uses JSON for simplicity, and here's the assumption that the browsing record only records 3.
The basic process is as follows:
1. If the number of historical products recorded in the cookie is 0 or 1 or 2, insert it directly into the cookie.
2, if the number of records in the cookie is 3 (because we limit only 3 records), then remove the first set of records, remove the method is to iterate, but not from the first, but starting from the second, and then inserting a new history.
Get ready:
1. The JSON string we want to deposit in the cookie is similar to the following:
Copy Code code as follows:
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: Is the product's page URL
Imgurl: Is the URL of the picture
Proname: Product Name
Proprice: Product Price
2, how to obtain this information? The following to Jingdong Mall as an example:
What we need to get is the "Yellow area" section above, and one is the page address. To view its code, navigate to the key section of the code block as follows:
<div class= "Product_Name" >hp (HP) Deskjet D2568 color Inkjet photo printer
<div id= "Product_bigimage" class= "jqzoom" onclick = "window.open" (' http://www.360buy.com/bigimage.aspx?id=131407 ') ) ">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
The price of Jingdong is made of picture:
<ul class= "Pro_baseinfo" ><li><em class= "Grey" > Product number:131407</em></li><li> market price: <em class= "M_line" >￥499.00</em></li><li> Jing Dong Price: 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 "" > (notify me of Price) </a>
Use jquery to get the information we need:
Copy Code code as follows:
$ (function () {
var pro_url = document. url;//page Address
var pro_name = $ (". Product_Name H1 "). Text ()//Product Name
var pro_img = $ ("#Product_BigImage img") [0].src;//Picture path
var Pro_price = $ (". Pro_baseinfo li "). EQ (2). Children (" img ") [0].src;//Price
})
Add: Here Jingdong is a bit more complicated, and if we write the program we can give an ID of the element to get.
Demo Get (please "Run code" and refresh once):
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> Untitled document </title> <script language=" javascript "type=" Text/javascript "src=" Http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js "></script> <script language=" javascript "type=" Text/javascript "> $ (function () {var pro_url = document. url;//page address var pro_name = $ (". Product_Name H1 "). Text ()//product name var pro_img = $ (" #Product_BigImage img ") [0].src;//picture path var pro_price = $ (". Pro_baseinfo li "). EQ (2). Children (" img ") [0].src;//Price document.write ("-------------------------------------------- -------------- "); document.write ("Current URL:" "+pro_url+"); document.write ("Product Name:" "+pro_name+"); document.write ("Product Picture:" + pro_img+ ""); document.write ("Product Price:" + pro_pricE+ ""); document.write ("----------------------------------------------------------"); }) </script> </pead> <body> <div class= "product_name" ><p> hp (HP) Deskjet D2568 color Inkjet Photo printing Machine </p><font color= "#FF0000" > Hot price Double ink drop printing technology restore photo color </font></div> <div id= "Product_intro_left "><div id=" Product_bigimage "class=" jqzoom "onclick =" window.open (' http://www.360buy.com/bigimage.aspx?id= 131407 ') "></div> <div id=" product_littleimage "><ul id=" Mycarousel "class=" Jcarousel-skin-tango " ><li></li><li></li><li></li><li></li><li></li> </ul></div><div id= "Product_opp" > click here to view the big picture </div></div><!--[if! Ie]> Product profile left end <! [endif]--> <!--[if! Ie]> Product Introduction right hand start <! [endif]--> <div id= "Product_intro_right" > <ul class= "pro_baseinfo" > <LI>&L T;em class= "Grey" > Product number:131407</em></li> <li> Market Price: <em class= "M_line" >￥499.00</em></li> <li> Beijing East Price:</li> </ul> </div> Cloud Communities </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Current 1/2 page
12 Next read the full text
