Javascript는 쿠키를 결합하여 검색 기록_javascript 기술을 실현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Javascript는 쿠키를 결합하여 검색 기록_javascript 기술을 실현합니다.

PHP中文网

May 16, 2016 pm 07:01 PM

cookiesjavascript역사 찾아보기

최근 직장에서 문제가 발생했습니다. 특히 이 웹사이트에서 사용자의 클릭 기록을 기록하고 내림차순으로 정렬해야 합니다(처음 6개만 탐색 기록). 표시되며 반복할 수 없습니다.)

저는 JavaScript를 잘 몰랐기 때문에 한동안 헤매었습니다.
나중에 두 명의 스승님의 지도를 받고(이 두 동료에 대한 존경심은 끝없이 흐르는 강물과도 같군요...) 문득 깨닫고 깨달음을 얻었습니다.
이 기능 추가가 성공적으로 완료되었습니다.

먼저 JavaScript에서 이 기능에 대한 몇 가지 개체와 메서드를 소개하겠습니다.

1. window.event 객체:
이벤트는 이벤트 객체를 발생시킨 요소, 마우스의 위치와 상태, 누른 키 등 이벤트의 상태를 나타냅니다.
이벤트 대상은 이벤트 기간에만 유효합니다.

2.event.srcElement：
은 평신도 입장에서는 이벤트가 발생하는 곳을 의미합니다.

3.srcElement.parentNode:
은 이벤트 소스의 상위 노드를 나타냅니다.

4. srcElement.태그이름:
이벤트 소스의 태그 이름을 나타냅니다.

5. 대문자():
해당 문자열을 대문자로 표기하는 방법

기본적으로 이러한 속성과 메서드는 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.achome.cn_"; //링크 주소인 이벤트 소스의 href 값을 가져옵니다.
wlink=linkname " " address; //링크 이름과 링크 주소를 하나의 변수로 통합합니다.
old_info=getCookie("history_info"); //쿠키에서 이전에 기록된 검색 기록을 가져옵니다. 이 함수 뒤에 명령문이 있습니다.
//다음 프로그램은 이전 6개의 이전 작업과 함께 새로운 탐색 작업이 반복되는지 확인하기 시작합니다. 반복되지 않으면 쿠키에 기록됩니다.
var insert=true;
if(old_info==null) //쿠키가 비어 있는지 확인
{
삽입=true;
}
그밖에
{
var old_link=old_info.split("_www.achome.cn_");
(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); //쿠키 작성, 이 함수 뒤에 명령문이 있습니다.
history_show().reload();
휴식;
}
}
srcElem = srcElem.parentNode;
}
}
잡기(e){}
참을 반환합니다.
}
document.onclick=glog; // 페이지를 클릭할 때마다 glog 기능을 실행합니다.

2부: 쿠키 관련 기능.

코드 복사 코드는 다음과 같습니다.

//쿠키 관련 기능
//쿠키에 지정된 내용을 읽습니다.
함수 getCookieVal(오프셋) {
var endstr = document.cookie.indexOf(";", 오프셋);
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;
동안 (i var j = i alen;
if (document.cookie.substring(i, j) == arg) return getCookieVal (j);
i = document.cookie.indexOf(" ", i) 1;
if (i == 0) 중단;
}
널을 반환합니다.
}
//쿠키에 탐색 작업 기록
함수 setCookie(이름, 값) {
var exp = new Date();
exp.setTime(exp.getTime() 3600000000);
document.cookie = 이름 "="값"; 만료=" exp.toGMTString();
}

파트 3: 페이지 표시 기능.

코드 복사 코드는 다음과 같습니다.

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;
(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는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

Python vs. JavaScript : 어떤 언어를 배워야합니까?May 03, 2025 am 12:10 AM

Python 또는 JavaScript는 경력 개발, 학습 곡선 및 생태계를 기반으로해야합니다. 1) 경력 개발 : Python은 데이터 과학 및 백엔드 개발에 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 적합합니다. 2) 학습 곡선 : Python 구문은 간결하며 초보자에게 적합합니다. JavaScript Syntax는 유연합니다. 3) 생태계 : Python에는 풍부한 과학 컴퓨팅 라이브러리가 있으며 JavaScript는 강력한 프론트 엔드 프레임 워크를 가지고 있습니다.

JavaScript 프레임 워크 : 현대적인 웹 개발 파워May 02, 2025 am 12:04 AM

JavaScript 프레임 워크의 힘은 개발 단순화, 사용자 경험 및 응용 프로그램 성능을 향상시키는 데 있습니다. 프레임 워크를 선택할 때 : 1. 프로젝트 규모와 복잡성, 2. 팀 경험, 3. 생태계 및 커뮤니티 지원.

JavaScript, C 및 브라우저의 관계May 01, 2025 am 12:06 AM

서론 나는 당신이 이상하다는 것을 알고 있습니다. JavaScript, C 및 Browser는 정확히 무엇을해야합니까? 그들은 관련이없는 것처럼 보이지만 실제로는 현대 웹 개발에서 매우 중요한 역할을합니다. 오늘 우리는이 세 가지 사이의 밀접한 관계에 대해 논의 할 것입니다. 이 기사를 통해 브라우저에서 JavaScript가 어떻게 실행되는지, 브라우저 엔진의 C 역할 및 웹 페이지의 렌더링 및 상호 작용을 유도하기 위해 함께 작동하는 방법을 알게됩니다. 우리는 모두 JavaScript와 브라우저의 관계를 알고 있습니다. JavaScript는 프론트 엔드 개발의 핵심 언어입니다. 브라우저에서 직접 실행되므로 웹 페이지를 생생하고 흥미롭게 만듭니다. 왜 Javascr

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는