JavaScript が Cookie を組み合わせて閲覧履歴を実現_JavaScript スキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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

PHP中文网

May 16, 2016 pm 07:01 PM

cookiesjavascript閲覧履歴

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

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

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

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

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

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

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

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

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

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

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

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

function glog(evt) //マウスクリックアクションを記録する関数を定義します
{
evt=evt?evt:window.event;var srcElem=(evt.target)?evt.target:evt.srcElement;
試してください
{
while(srcElem.parentNode&&srcElem!=srcElem.parentNode)
//上記のステートメントは、ユーザーの無効なクリックが記録されるのを防ぐために、マウス操作が有効な領域で発生するかどうかを決定します。
{
if(srcElem.tagName&&srcElem.tagName.toUpperCase()=="A")//ユーザーがクリックしたオブジェクトがリンクかどうかを判断します
{
linkname=srcElem.innerHTML; //イベントソースの名前を取得します。これは、との間のテキストであり、リンク名です。
address=srcElem.href "_www.ahome.cn_"; // イベントソースの href 値 (リンクのアドレス) を取得します。
wlink=linkname " " address //リンク名とリンクアドレスを 1 つの変数に統合します。
old_info=getCookie("history_info"); //以前に記録された閲覧履歴を Cookie から取得します。この関数の後にステートメントがあります。
//次のプログラムは、新しい閲覧アクションが以前の 6 つの履歴アクションと繰り返されるかどうかを判断するために開始され、繰り返されない場合は Cookie に書き込まれます。
var insert=true;
if(old_info==null) //クッキーが空かどうかを判定する
{
挿入=true;
}
その他
{
var old_link=old_info.split("_www.ahome.cn_");
for(var j=0;j{
if(old_link[j].indexOf(リンク名)!=-1)
挿入=false;
if(old_link[j]=="null")
休憩;
}
}
if(挿入)
{
wlink =getCookie("history_info");
setCookie("history_info",wlink); //Cookie を書き込みます。この関数の後にステートメントがあります。
history_show().reload();
休憩;
}
}
srcElem = srcElem.parentNode;
}
}
キャッチ(e){}
true を返します。
}
document.onclick=glog; // ページをクリックするたびに glog 関数を実行します。

パート 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 var j = i alen;
if (document.cookie.substring(i, j) == arg) return getCookieVal (j);
i = document.cookie.indexOf(" ", i) 1;
if (i == 0) ブレーク;
}
null を返します。
}
//閲覧アクションを Cookie に書き込みます
関数 setCookie (名前, 値) {
var exp = new Date();
exp.setTime (exp.getTime() 3600000000);
document.cookie = 名前 "=" 値 "; 期限切れ = exp.toGMTString();
}

その 3: ページ表示機能。

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

function History_show()
{
var History_info=getCookie("history_info"); // Cookie 内の履歴レコードを取得します。
var content="" //表示変数を定義します。
if(history_info!=null)
{
history_arg=history_info.split("_www.ahome.cn_");
変数 i;
for(i=0;i{
if(history_arg[i]!="null")
{
var wlink=history_arg[i].split(" ");
content =("↑" "" wlink[0 ] "
");
}
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 までご連絡ください。

Python vs. JavaScript：開発者の比較分析May 09, 2025 am 12:22 AM

PythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。

Python vs. JavaScript：ジョブに適したツールを選択するMay 08, 2025 am 12:10 AM

PythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1）データサイエンスおよび自動化タスクのPythonを選択します。 2）フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。

PythonとJavaScript：それぞれの強みを理解するMay 06, 2025 am 12:15 AM

PythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。

JavaScriptのコア：CまたはCの上に構築されていますか？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptアプリケーション：フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例：Webページテキストのコンテンツを変更します。 2。バックエンドの例：node.jsサーバーを作成します。

Python vs. Javascript：どの言語を学ぶべきですか？May 03, 2025 am 12:10 AM

PythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1）キャリア開発：Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2）学習曲線：Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3）エコシステム：Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。

JavaScriptフレームワークのパワーは、開発を簡素化し、ユーザーエクスペリエンスとアプリケーションのパフォーマンスを向上させることにあります。フレームワークを選択するときは、次のことを検討してください。1。プロジェクトのサイズと複雑さ、2。チームエクスペリエンス、3。エコシステムとコミュニティサポート。

JavaScript、C、およびブラウザの関係May 01, 2025 am 12:06 AM

はじめに私はあなたがそれを奇妙に思うかもしれないことを知っています、JavaScript、C、およびブラウザは正確に何をしなければなりませんか？彼らは無関係であるように見えますが、実際、彼らは現代のウェブ開発において非常に重要な役割を果たしています。今日は、これら3つの間の密接なつながりについて説明します。この記事を通して、JavaScriptがブラウザでどのように実行されるか、ブラウザエンジンでのCの役割、およびそれらが協力してWebページのレンダリングと相互作用を駆動する方法を学びます。私たちは皆、JavaScriptとブラウザの関係を知っています。 JavaScriptは、フロントエンド開発のコア言語です。ブラウザで直接実行され、Webページが鮮明で興味深いものになります。なぜJavascrを疑問に思ったことがありますか

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。