jquery uses cookies and JSON to record users ' recent browsing history _jquery

In some electric business website, have "the commodity browsing history" This function, some video class, the novel class website also can record the user recent browsing history. This article will use cookies and JSON to explain how to implement this functionality.
Cookies can be used to record client user IDs, passwords, browsed pages, time to stay, and so on, and jquery provides a cookie plugin that makes it easy to read and write cookie information.
Basic Process:
1, get the article details page article title and page address;
2, to obtain browsing history cookie information, to determine if browsing history of the cookie already exists in the current article browsing record, then do not do any operation;
3, if the browsing history of the cookie does not exist in the current article browsing record, the current article's Cookie information (article title and page address) are written in the browsing history of the cookie information. The cookie information is written in JSON data format for easy reading.
4, Get browsing history cookie information, traverse the JSON data, analysis and output browsing history.
Detailed Explanation:
1, the guarantee to record the browsing history of Article details page has been loaded in jquery and cookie plug-ins. Get the article title and page address of the current article page:

var art_title = $ (". Blog_txt h2"). Text (); Article title 
var Art_url = document. URL; Page address 

2, get the user history browsing record, if already has the browsing history, then analyzes the historical record cookie information (JSON data format), obtains the record length.

 var canadd = true; Initial can insert cookie information 
var hisart = $.cookie ("Hisart"); 
var len = 0; 
if (hisart) { 
  Hisart = eval ("+hisart+")); 
  len = hisart.length; 
} 

3, if browsing history cookie information already exists, then walk through the cookie information, compare the current article title, if the cookie information already exists in the current article title, then abort the program, do not do any action.

 $ (Hisart). each (function () { 
  if (this.title = = art_title) { 
    Canadd = false;//already exists, cannot insert return 
    false; 
  } 
} ); 

4, if the current article does not exist in the browsing history cookie, you can insert the cookie information for the current article like a browsing history cookie. The JSON data needs to be constructed, the existing browsing record cookie and the cookie information for the current page have been combined into JSON data and then written 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, the cookie name is called Hisart, the value is JSON format data, such as: [{"title": "Article1", "url": "A.html"},{"title": " Article2 "," url ":" B.html "},]
5. Next, we will need to show the user browsing history of cookie information. In this example, the corresponding demo page, first to get the value of browsing history cookie:hisart, and then analysis, traversal, combined into a string 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 placed a list of #list on the demo page, and of course this page also needs to be preloaded into the jquery library and cookie plugin.

The above is the entire content of this article, I hope to learn from the cookie plugin help.