ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript が Cookie を組み合わせて閲覧履歴を実現_JavaScript スキル

JavaScript が Cookie を組み合わせて閲覧履歴を実現_JavaScript スキル

PHP中文网オリジナル: 2016-05-16 19:01:231097ブラウズ

最近仕事で問題が発生しました。具体的には、この Web サイトでのユーザーのクリック履歴を記録し、降順に並べ替える必要があるページがあります (最初の 6 件の閲覧履歴のみ)。が表示され、繰り返すことはできません。

私はこれまで JavaScript のことをよく知らなかったので、しばらく戸惑いました。
その後、二人の師匠の同僚の指導を受けて（この二人の同僚への賞賛は果てしない川のようなものです...）、私は突然気づき、悟りを開きました。
この機能の追加は正常に完了しました。

まず、JavaScript のこの関数に関するオブジェクトとメソッドをいくつか紹介します。

1. window.event オブジェクト:
イベントは、イベントオブジェクトをトリガーした要素、マウスの位置とステータス、押されたキーなど、イベントのステータスを表します。
イベントオブジェクトはイベント中にのみ有効です。

2.event.src要素:
はイベントのソースを示します。平たく言えば、イベントがトリガーされる場所です。

3. srcElement.parentNode:
はイベントのソースの親ノードを表します

4. srcElement.tagName:
イベントソースのタグ名を示します

5.toUpperCase():
対応する文字列を大文字にする方法

基本的にこれらのオブジェクトは、JavaScript に触れたばかりの人や、これまでそのような関数をほとんど使用したことがない人にとっては少し馴染みのないものかもしれませんが、理解すれば問題ありません。それを見つけるのは難しくなく、JavaScript 検証フォームなどとあまり変わりません。

以下、手順に基づいて順を追って説明します（手順には無理な点も必ずありますので、皆さんで修正して一緒に進めていただければと思います）。

パート 1: JavaScript は閲覧アクションを記録します。

コードをコピーコードは次のとおりです:

パート 2: Cookie 関連の機能。

コードをコピーコードは次のとおりです:

//Cookie 関連の関数
//Cookieで指定されたコンテンツを読み取ります
関数 getCookieVal (オフセット) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1) endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}

関数 getCookie (名前) {
var arg = 名前 "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i d938974696e3e80851602c4e6eab0512↑e6e38b3c62e8df885fe2e3986461aa63" "65bcef1bbcae41f21cf5c6ee36808a51" wlink[0 ] "5db79b134e9f6b82c0b36e0489ee08ed0c6dc11e160d3b678d68754cc175188a");
}
document.getElementById("history").innerHTML=content;
}
}
その他
{document.getElementById("history").innerHTML="閲覧履歴がありません";}
}

効果を表示:

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：右下隅の js ポップアップウィンドウをクリックして、effect_advertising コードを閉じます次の記事：右下隅の js ポップアップウィンドウをクリックして、effect_advertising コードを閉じます

続きを見る

JavaScript が Cookie を組み合わせて閲覧履歴を実現_JavaScript スキル

関連記事