jquery utilise des cookies et JSON pour enregistrer l'historique de navigation récent de l'utilisateur_jquery

Sur certains sites Web de commerce électronique, il existe une fonction « historique de navigation des produits », et certains sites Web de vidéos et de romans peuvent également enregistrer l'historique de navigation récent des utilisateurs. Cet article utilisera les cookies et JSON pour expliquer comment implémenter cette fonction.
Les cookies peuvent être utilisés pour enregistrer les identifiants utilisateur des clients, les mots de passe, les pages Web consultées, la durée du séjour et d'autres informations. JQuery fournit un plug-in de cookie qui peut lire et écrire des informations sur les cookies de manière très pratique.
Processus de base :
1. Obtenez le titre et l'adresse de la page de l'article sur la page de détails de l'article
 ; 2. Obtenez les informations du cookie de l'historique de navigation et déterminez si l'historique de navigation de l'article en cours existe déjà dans le cookie de l'historique de navigation, alors aucune opération ne sera effectuée
; 3. S'il n'y a aucun enregistrement de navigation de l'article en cours dans le cookie de l'historique de navigation, les informations du cookie de l'article en cours (titre de l'article et adresse de la page) seront écrites dans les informations du cookie de l'historique de navigation. Les informations sur les cookies écrites sont au format de données JSON, facile à lire.
4. Obtenez des informations sur les cookies de l'historique de navigation, parcourez les données JSON, analysez et extrayez les enregistrements de l'historique de navigation.
Explication détaillée :
1. Assurez-vous que la page de détails de l'article pour enregistrer l'historique de navigation a chargé les plug-ins jquery et cookies. Obtenez le titre de l'article et l'adresse de la page de l'article actuel :

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

2. Obtenez l'historique de navigation de l'utilisateur. Si l'historique de navigation existe déjà, analysez les informations de cookie de l'enregistrement historique (format de données JSON) et obtenez la longueur de l'enregistrement.

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

3. Si les informations du cookie de l'historique de navigation existent déjà, parcourez les informations du cookie et comparez le titre de l'article actuel. Si le titre de l'article actuel existe déjà dans les informations du cookie, le programme sera terminé et aucune opération ne sera effectuée.

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

4. Si l'article en cours n'existe pas dans le cookie de l'historique de navigation, les informations du cookie de l'article en cours peuvent être insérées dans le cookie de l'historique de navigation. À ce stade, vous devez créer des données JSON, combiner le cookie d'enregistrement de navigation existant et les informations de cookie de la page actuelle dans les données JSON, puis les écrire dans l'enregistrement d'historique de navigation via la méthode $.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}); 
} 

De cette manière, nous obtenons les informations du cookie de l'historique de navigation de l'utilisateur. Le nom du cookie est hisArt et la valeur est constituée de données au format JSON, telles que : [{"title": "article1", "url": a. html" },{"title":"article2","url":"b.html"},]
5. Ensuite, nous devons afficher les informations sur les cookies de l'historique de navigation de l'utilisateur. Dans la page de démonstration correspondant à cet exemple, vous devez d'abord obtenir la valeur du cookie de l'historique de navigation : hisArt, puis l'analyser, la parcourir et la combiner en une chaîne pour afficher la page. Le code est le suivant :
.

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

Nous avons placé une liste #list sur la page de démonstration. Bien sûr, cette page doit également précharger la bibliothèque jquery et le plug-in cookie.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde d'apprendre le plug-in des cookies.