jquery uses cookies and JSON to record the user's recent browsing history_jquery

On some e-commerce websites, there is a "product browsing history" function, and some video and novel websites can also record users' recent browsing history. This article will use Cookies and JSON to explain how to implement this function.
Cookies can be used to record client user IDs, passwords, web pages browsed, length of stay and other information. jQuery provides a cookie plug-in that can read and write cookie information very conveniently.
Basic process:
1. Get the title and page address of the article on the article details page;
2. Obtain the browsing history cookie information and determine if the browsing history of the current article already exists in the browsing history cookie, then no operation will be performed;
3. If there is no browsing record of the current article in the browsing history cookie, the cookie information of the current article (article title and page address) will be written into the cookie information of the browsing history. The cookie information written is in JSON data format, which is easy to read.
4. Obtain browsing history cookie information, traverse JSON data, analyze and output browsing history records.
Detailed explanation:
1. Ensure that the article details page to record browsing history has loaded jquery and cookie plug-ins. Get the article title and page address of the current article page:

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

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

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

3. If the browsing history cookie information already exists, traverse the cookie information and compare the current article title. If the current article title already exists in the cookie information, the program will be terminated and no operation will be performed.

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

4. If the current article does not exist in the browsing history cookie, the cookie information of the current article can be inserted into the browsing history cookie. At this time, you need to construct json data, combine the existing browsing record cookie and the cookie information of the current page into JSON data, and then write it into the browsing history record 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. The cookie name is hisArt and the value is data in JSON format, such as: [{"title":"article1","url":"a.html" },{"title":"article2","url":"b.html"},]
5. Next, we need to display the cookie information of the user's browsing history. In the demo page corresponding to this example, you must first obtain the value of the browsing history cookie: hisArt, then analyze, traverse, and combine it into a string to output 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 list on the demo page. Of course, this page also needs to pre-load the jquery library and cookie plug-in.

The above is the entire content of this article. I hope it will be helpful for everyone to learn the cookie plug-in.