jquery uses Cookie and JSON to record a user's recent browsing history

In some e-commerce websites, there is a function of "commodity browsing history", and some video and novel websites can also record the user's recent browsing history. This article uses Cookie and JSON to show you how to implement this functionality.
Cookie can be used to record client user ID, password, visited web pages, stay time and other information, jQuery provides a plug-in cookie, can be very convenient to read and write cookie information.
Basic process:
1, get the article details page article title and page address;
2. Obtain the browsing history cookie information, and judge that if the browsing history cookie has the browsing history of the current article, no operation will be carried out;
3, If there is no browsing history of the current article in the cookie browsing history, write the cookie information of the current article (article title and page address) into the cookie information of the browsing history. The written cookie information is in JSON data format, which is easy to read.
4. Obtain the browsing history cookie information, traverse the JSON data, analyze and output the browsing history.
A:
1. Make sure that the article details page that you want to record your browsing history are loaded into the jquery and cookie plugins. Get the article title and page address of the current article page:

var art_title = $(".blog_txt h2").text(); // The article title  
var art_url = document.URL; // Page address  

2. Obtain the browsing history of the user. If the browsing history already exists, analyze the cookie information of the history (JSON data format) to obtain the length of the record.

 var canAdd = true; // You can initially insert cookie information  
var hisArt = $.cookie("hisArt"); 
var len = 0; 
if(hisArt){ 
  hisArt = eval("("+hisArt+")"); 
  len = hisArt.length; 
} 

3, if the browsing history cookie information already exists, then traverse the cookie information, compared with the current article title, if the cookie information already exists the current article title, then stop the program, do not do any operation.

 $(hisArt).each(function(){ 
  if(this.title == art_title){ 
    canAdd = false; // Cannot insert already exists  
    return false; 
  } 
}); 

4, If the current article does not exist in the browsing history cookie, you can insert the current article cookie information as in the browsing history cookie. At this point, you need to build the json data, combine the existing browsing history cookie and the cookie information of the current page into JSON data, and then write it to the browsing history through the $.cookie() method.

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

In this way, we get the user's browsing history cookie information, cookie name is hisArt, the value is JSON format data, such as: [{"title":"article1","url":"a.html"},{"title":"article2","url":"b.html"},]
5. Next, we need to display cookie information about the user's browsing history. In the corresponding demo page of this example, first get the value of the browsing history cookie: hisArt, and then analyze, traverse and combine it into a string and output it to the page. The code is as follows:

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

We have placed a list of #list on the demo page, but this page also needs to pre-load the jquery library and the cookie plug-in.

That's all for this article. I hope it will help you learn the ES86en plug-in.