jquery verwendet Cookies und JSON, um den aktuellen Browserverlauf des Benutzers aufzuzeichnen_jquery

Auf einigen E-Commerce-Websites gibt es die Funktion „Produkt-Browserverlauf“, und einige Video- und Roman-Websites können auch den aktuellen Browserverlauf der Benutzer aufzeichnen. In diesem Artikel werden Cookies und JSON verwendet, um zu erklären, wie diese Funktion implementiert wird.
Cookies können verwendet werden, um Client-Benutzer-IDs, Passwörter, besuchte Webseiten, Aufenthaltsdauer und andere Informationen aufzuzeichnen. jQuery bietet ein Cookie-Plugin, das Cookie-Informationen sehr bequem lesen und schreiben kann.
Grundlegender Prozess:
1. Rufen Sie den Titel und die Seitenadresse des Artikels auf der Artikeldetailseite ab 2. Rufen Sie die Browserverlaufs-Cookie-Informationen ab und stellen Sie fest, ob der Browserverlauf des aktuellen Artikels bereits im Browserverlaufs-Cookie vorhanden ist. Dann wird kein Vorgang ausgeführt 3. Wenn im Cookie des Browserverlaufs kein Browsing-Datensatz des aktuellen Artikels vorhanden ist, werden die Cookie-Informationen des aktuellen Artikels (Artikeltitel und Seitenadresse) in die Cookie-Informationen des Browserverlaufs geschrieben. Die geschriebenen Cookie-Informationen liegen im JSON-Datenformat vor, das leicht zu lesen ist.
4. Erhalten Sie Cookie-Informationen zum Browserverlauf, durchsuchen Sie JSON-Daten, analysieren Sie Browserverlaufsdatensätze und geben Sie sie aus.

Detaillierte Erklärung:
1. Stellen Sie sicher, dass auf der Artikeldetailseite zum Aufzeichnen des Browserverlaufs JQuery- und Cookie-Plug-Ins geladen sind. Rufen Sie den Artikeltitel und die Seitenadresse der aktuellen Artikelseite ab:

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

2. Rufen Sie den historischen Browserdatensatz des Benutzers ab. Wenn der Browserverlauf bereits vorhanden ist, analysieren Sie die Cookie-Informationen des historischen Datensatzes (JSON-Datenformat) und ermitteln Sie die Datensatzlänge.

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

3. Wenn die Cookie-Informationen des Browserverlaufs bereits vorhanden sind, durchsuchen Sie die Cookie-Informationen und vergleichen Sie den aktuellen Artikeltitel. Wenn der aktuelle Artikeltitel bereits in den Cookie-Informationen vorhanden ist, wird das Programm beendet und es wird kein Vorgang ausgeführt.

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

4. Wenn der aktuelle Artikel nicht im Browserverlauf-Cookie vorhanden ist, können die Cookie-Informationen des aktuellen Artikels in den Browserverlauf-Cookie eingefügt werden. Zu diesem Zeitpunkt müssen Sie JSON-Daten erstellen, das vorhandene Browserdatensatz-Cookie und die Cookie-Informationen der aktuellen Seite zu JSON-Daten kombinieren und diese dann über die Methode $.cookie() in den Browserverlaufsdatensatz schreiben.

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

Auf diese Weise erhalten wir die Cookie-Informationen zum Browserverlauf des Benutzers. Der Cookie-Name ist hisArt und der Wert sind Daten im JSON-Format, wie zum Beispiel: [{"title": "article1", "url": "a. html" },{"title":"article2", "url": "b.html"},]

5. Als nächstes müssen wir die Cookie-Informationen des Browserverlaufs des Benutzers anzeigen. Auf der Demoseite, die diesem Beispiel entspricht, müssen Sie zuerst den Wert des Browserverlaufscookies abrufen: hisArt, ihn dann analysieren, durchlaufen und zu einer Zeichenfolge kombinieren, um ihn auf der Seite auszugeben. Der Code lautet wie folgt:

 $(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); 
}); 

Wir haben eine #list-Liste auf der Demoseite platziert. Natürlich müssen auf dieser Seite auch die JQuery-Bibliothek und das Cookie-Plug-In vorinstalliert werden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass es für alle hilfreich ist, das Cookie-Plug-in zu lernen.