Home >Web Front-end >JS Tutorial >Javascript combines cookies to realize browsing history_javascript skills

Javascript combines cookies to realize browsing history_javascript skills

PHP中文网Original: 2016-05-16 19:01:231065browse

I recently encountered a problem at work. There is a page that needs to add a browsing history function. Specifically, it needs to record the user’s click history on this website and sort them in descending order (only the first 6 browsing histories are displayed. and cannot be repeated).

Because I didn’t know JavaScript well enough before, I was at a loss for a while.
Later, after receiving the guidance of two master colleagues (the admiration for these two colleagues is like an endless river...), I suddenly realized and became enlightened.
Successfully completed adding this feature.

First, let’s introduce some objects and methods about this function in JavaScript:

1. window.event object:
Event represents the status of the event, such as the element that triggered the event object, the position and status of the mouse, the key pressed, etc.
The event object is only valid during the event.

2. event.srcElement：
indicates the source of the event. In layman’s terms, it is the place where the event is triggered.

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

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

5. toUpperCase():
How to capitalize the corresponding string

Basically these are these properties and methods. These objects may be a bit unfamiliar to friends who have just come into contact with JavaScript or those who have rarely used such functions before, but it doesn’t matter. After understanding it, it is not difficult to find out. , not much different from JavaScript validation forms and the like.

The following will give you a step-by-step explanation based on the procedure (the procedure will inevitably have unreasonable points, I hope everyone will correct me and make progress together):

Part 1: JavaScript records browsing actions.

Copy code The code is as follows:

View effect:

<html> 

<body> 

   

<script> 

//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) 

{ 

   

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") 

{ 

linkname=srcElem.innerHTML; 

address=srcElem.href+"_www.achome.cn_"; 

wlink=linkname+"+"+address;   

old_info=getCookie("history_info"); 

var insert=true;   

//////////////////////// 

if(old_info==null) //判断cookie是否为空 

{ 

  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); 

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+=("<font color=&#39;#ff000&#39;>↑</font>"+"<a href=&#39;"+wlink[1]+"&#39; target=&#39;_blank&#39;>"+wlink[0]+"</a>
"); 

      } 

      document.getElementById("history").innerHTML=content; 

      } 

} 

else 

  {document.getElementById("history").innerHTML="对不起，您没有任何浏览纪录";} 

} 

// JavaScript Document 

</script> 

<div>浏览历史排行（只显示6个最近访问站点并且没有重复的站点出现）</div> 

<div id="history"> 

<script> 

history_show(); 

</script> 

</div> 

<div> 


 


 

点击链接： 

<a href="#">网站1</a> 

<a href="#">网站2</a> 

<a href="#">网站3</a> 

<a href="#">网站4</a> 

<a href="#">网站5</a> 

<a href="#">网站6</a> 

<a href="#">网站7</a> 

<a href="#">网站8</a> 

<a href="#">网站9</a> 

</div> 

<div>如果有其他疑问请登陆<a href=http://www.jb51.net>脚本之家</a>与我联系</div> 

</body> 

</html>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js pop-up window in the lower right corner, click to close the effect_advertising codeNext article：js pop-up window in the lower right corner, click to close the effect_advertising code

See more

Javascript combines cookies to realize browsing history_javascript skills

Related articles