Browser record history using javascript and Cookies _ javascript skills

Recently, I encountered a problem. I need to add a browsing history function for a page, specifically, you need to record the click history of the user on this website and sort them in descending order (only the first six browsing history are displayed and cannot be repeated ). Recently, I encountered a problem. I need to add a browsing history function for a page, specifically, you need to record the click history of the user on this website and sort them in descending order (only the first six browsing history are displayed and cannot be repeated ).

The previous lack of in-depth understanding of javascript left me helpless.
Later, after the guidance of the two master colleagues (the admiration for these two colleagues is like a continuous stream of rivers and rivers), I suddenly realized that I was suddenly enlightened.
This function is successfully added.

First, we will introduce some objects and methods related to this function in javascript:

1. window. event object:
Event indicates the event status, such as the element that triggers the event object, the location and status of the mouse, and the key to be pressed.
The event object is valid only when an event occurs.

2. event. srcElement:
Indicates the origin of the event, which is generally the place where the event is triggered.

3. srcElement. parentNode:
Indicates the parent node of the event source.

4. srcElement. tagName:
The tag name of the event source.

5. toUpperCase ():
Method for capitalizing the corresponding string

These attributes and methods are basically the same. For friends who are new to javascript or who seldom use such functions before, these objects are a little unfamiliar, but it doesn't matter, it is not difficult to find it after understanding it. It is not much different from javascript verification forms.

Next we will explain the procedures in a step-by-step manner (the procedures are unreasonable and we hope you can correct them and make progress together ):

Part 1: javascript records browsing actions.

The Code is as follows:

Function glog (evt) // defines the function for recording the mouse clicking action.
{
Evt = evt? Evt: window. event; var srcelemem(evt.tar get )? Evt.tar get: evt. srcElement;
Try
{
While (srcElem. parentNode & srcElem! = SrcElem. parentNode)
// Use the preceding statement to determine whether the mouse action is in the valid area and prevent invalid clicks from being recorded.
{
If (srcElem. tagName & srcElem. tagName. toUpperCase () = "A") // you can determine whether the object you click belongs to A link.
{
Linkname = srcElem. innerHTML; // retrieve the name of the event source, that is, the text between the two, that is, the Link name.
Address = srcElem. href + "_ www.achome.cn _"; // retrieve the href value of the event source, that is, the link address.
Wlink = linkname + "+" + address; // integrate the Link name and link address into a variable.
Old_info = getCookie ("history_info"); // retrieves the browsing history recorded previously from Cookies. This function is declared later.
// The following program starts to judge whether the new browsing action is duplicate with the previous six historical ones. If not, the cookies are written.
Var insert = true;
If (old_info = null) // checks whether the cookie is null.
{
Insert = true;
}
Else
{
Var old_link = old_info.split ("_ www.achome.cn _");
For (var j = 0; j <= 5; j ++)
{
If (old_link [j]. indexOf (linkname )! =-1)
Insert = false;
If (old_link [j] = "null ")
Break;
}
}
If (insert)
{
Wlink + = getCookie ("history_info ");
SetCookie ("history_info", wlink); // write cookie, which is declared later
History_show (). reload ();
Break;
}
}
SrcElem = srcElem. parentNode;
}
}
Catch (e ){}
Return true;
}
Document. onclick = glog; // execute the glog function for each page Click action.

Part 1: functions related to Cookies.

The Code is as follows:

// Cookie-related functions
// Read the specified content in the 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;
}
// Write browsing actions into cookies
Function setCookie (name, value ){
Var exp = new Date ();
Exp. setTime (exp. getTime () + 3600000000 );
Document. cookie = name + "=" + value + "; expires =" + exp. toGMTString ();
}

Part 1: Functions displayed on the page.

The Code is as follows:

Function history_show ()
{
Var history_info = getCookie ("history_info"); // retrieve the historical records in the cookie.
Var content = ""; // defines a DISPLAY variable
If (history_info! = Null)
{
History_arg = history_info.split ("_ www.achome.cn _");
Var I;
For (I = 0; I <= 5; I ++)
{
If (history_arg [I]! = "Null ")
{
Var wlink = history_arg [I]. split ("+ ");
Content + = ("plaintext" + "" + wlink [0] +"
");
}
Document. getElementById ("history"). innerHTML = content;
}
}
Else
{Document. getElementById ("history"). innerHTML = "Sorry, you have no browsing history ";}
}

View results:

 Script // function related to cookie 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. subs Tring (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) {evt = evt? Evt: window. event; var srcelemem(evt.tar get )? Evt.tar get: evt. srcElement; try {while (srcElem. parentNode & srcElem! = SrcElem. parentNode) {if (srcElem. tagName & srcElem. tagName. toUpperCase () = "A") {linkname = srcElem. innerHTML; address = srcElem. href + "_ www.achome.cn _"; wlink = linkname + "+" + address; old_info = getCookie ("history_info"); var insert = true; /// // if (old_info = null) // determine whether the cookie is null {insert = true;} else {var old_link = old_info.split ("_ www.achome.cn _"); for (var j = 0; j <= 5; j ++) {if (old_link [j]. I NdexOf (linkname )! =-1) insert = false; if (old_link [j] = "null") break ;}} /// // if (insert) // if the conditions are met, write the data again {wlink + = getCookie ("history_info"); setCookie ("history_info", wlink); history_show (). reload (); break;} srcElem = srcElem. parentNode ;}} catch (e) {}return true;} document. onclick = glog; //////////////////////////////////////// //////////////////////////////////////// function history_show () {Var history_info = getCookie ("history_info"); var content = ""; if (history_info! = Null) {history_arg = history_info.split ("_ www.achome.cn _"); var I; for (I = 0; I <= 5; I ++) {if (history_arg [I]! = "Null") {var wlink = history_arg [I]. split ("+"); content + = ("plain" + "" + wlink [0] + "");} document. getElementById ("history "). innerHTML = content ;}} else {document. getElementById ("history "). innerHTML = "Sorry, you have no browsing history" ;}// JavaScript Document script
Browsing History rankings (only six recently visited sites and no repeated sites are displayed)
 
Script history_show (); script
 
Click link: Website 1 website 2 website 3 website 4 website 5 website 6 website 7 website 8 website 9
 
If you have any other questions, please log in to your home and contact me.