jquery는 쿠키와 JSON을 사용하여 사용자의 최근 검색 기록을 기록합니다._jquery

일부 전자상거래 웹사이트에는 '상품 검색 기록' 기능이 있으며, 일부 동영상 및 소설 웹사이트에서는 사용자의 최근 검색 기록도 기록할 수 있습니다. 이 문서에서는 쿠키와 JSON을 사용하여 이 기능을 구현하는 방법을 설명합니다.
쿠키는 클라이언트 사용자 ID, 비밀번호, 검색한 웹 페이지, 체류 기간 및 기타 정보를 기록하는 데 사용될 수 있습니다. jQuery는 쿠키 정보를 매우 편리하게 읽고 쓸 수 있는 쿠키 플러그인을 제공합니다.
기본 과정:
1. 기사 세부정보 페이지에서 기사 제목과 페이지 주소를 확인하세요.
2. 검색 기록 쿠키 정보를 얻고 현재 기사의 검색 기록이 검색 기록 쿠키에 이미 존재하는지 확인하면 아무 작업도 수행되지 않습니다.
3. 검색 기록 쿠키에 현재 기사의 검색 기록이 없는 경우 현재 기사의 쿠키 정보(기사 제목 및 페이지 주소)가 검색 ​​기록의 쿠키 정보에 기록됩니다. 작성된 쿠키 정보는 읽기 쉬운 JSON 데이터 형식입니다.
4. 검색 기록 쿠키 정보를 얻고, JSON 데이터를 탐색하고, 검색 기록 기록을 분석 및 출력합니다.
자세한 설명:
1. 검색 기록을 기록하기 위한 기사 세부정보 페이지에 jquery 및 쿠키 플러그인이 로드되었는지 확인하세요. 현재 기사 페이지의 기사 제목과 페이지 주소를 가져옵니다:

var art_title = $(".blog_txt h2").text(); //文章标题 
var art_url = document.URL; //页面地址 

2. 사용자의 검색 기록을 얻습니다. 검색 기록이 이미 존재하는 경우 기록 기록의 쿠키 정보(JSON 데이터 형식)를 분석하여 기록 길이를 얻습니다.

 var canAdd = true; //初始可以插入cookie信息 
var hisArt = $.cookie("hisArt"); 
var len = 0; 
if(hisArt){ 
  hisArt = eval("("+hisArt+")"); 
  len = hisArt.length; 
} 

3. 검색 기록 쿠키 정보가 이미 존재하는 경우 쿠키 정보를 탐색하여 현재 기사 제목을 비교합니다. 쿠키 정보에 현재 기사 제목이 이미 존재하는 경우 프로그램이 종료되고 아무런 작업도 수행되지 않습니다.

 $(hisArt).each(function(){ 
  if(this.title == art_title){ 
    canAdd = false; //已经存在，不能插入 
    return false; 
  } 
}); 

4. 현재 기사가 검색 기록 쿠키에 존재하지 않는 경우, 현재 기사의 쿠키 정보가 검색 기록 쿠키에 삽입될 수 있습니다. 이때, json 데이터를 구성하고, 기존 검색 기록 쿠키와 현재 페이지의 쿠키 정보를 결합하여 JSON 데이터로 만든 후, $.cookie() 메소드를 통해 검색 기록 기록에 작성해야 합니다.

 if(canAdd==true){ 
  var json = "["; 
  var start = 0; 
  if(len>4){start = 1;} 
  for(var i=start;i<len;i++){ 
    json = json + "{\"title\":\""+hisArt[i].title+"\",\"url\":\""+hisArt[i].url+"\"},"; 
  } 
  json = json + "{\"title\":\""+art_title+"\",\"url\":\""+art_url+"\"}]"; 
  $.cookie("hisArt",json,{expires:1}); 
} 

이런 방식으로 사용자의 검색 기록 쿠키 정보를 가져옵니다. 쿠키 이름은 hisArt이고 값은 [{"title":"article1","url":"a와 같은 JSON 형식의 데이터입니다. html" },{"title":"article2","url":"b.html"},]
5. 다음으로 사용자 검색 기록의 쿠키 정보를 표시해야 합니다. 이 예에 해당하는 데모 페이지에서는 먼저 검색 기록 쿠키 값인 hisArt를 얻은 다음 이를 분석하고 탐색한 후 문자열로 결합하여 페이지에 출력해야 합니다.

 $(function(){ 
  var json = eval("("+$.cookie("hisArt")+")"); 
  var list = ""; 
  for(var i=0; i<json.length;i++){ 
    list = list + "<li><a href='"+json[i].url+"' target='_blank'>"+json[i].title+"</a></li>"; 
  } 
  $("#list").html(list); 
}); 

데모 페이지에 #list 목록을 배치했습니다. 물론 이 페이지에는 jquery 라이브러리와 쿠키 플러그인도 미리 로드해야 합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들이 쿠키 플러그인을 배우시는 데 도움이 되었으면 좋겠습니다.