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

This article uses the cookie plug-in to obtain the user's browsing history and display the user's recent browsing history on the page. If you are interested, you can refer to it on some e-commerce websites, with the product browsing history function, some video and novel websites can also record users' recent browsing history. This article uses cookies and JSON to explain how to implement this function.
Cookie can be used to record information such as the client user ID, password, browsed webpage, and stay time. jQuery provides a cookie plug-in that can easily read and write cookie information.
Basic Process:
1. Obtain the title and address of the document on the document details page;
2. Obtain the cookie information of the browsing history. If the cookie of the browsing history already contains the browsing history of the current article, no operation is performed;
3. If the browser history cookie does not contain the browser Record of the current article, write the cookie information (article title and page address) of the current article to the cookie information of the browser history. The cookie information written in JSON format for easy reading.
4. Obtain the cookie information of browsing history, traverse JSON data, analyze and output browsing history records.
Details:
1. Ensure that the jquery and cookie plug-ins are loaded on the document details page for viewing history. Obtain the title and address of the current article page:

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

2. Obtain the user's historical browsing history. If there is an existing browsing history, analyze the cookie information of the historical records (in JSON data format) and obtain the record length.

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

3. If the browser history cookie information already exists, traverse the cookie information and compare the title of the current article. If the cookie information already contains the title of the current article, stop the program without any operation.

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

4. If no current article exists in the browser history cookie, you can insert the cookie information of the current article in the browser history cookie. In this case, you need to construct json data, combine the existing cookie and the cookie information on the current page into JSON data, and then write it to the browsing history using the $. cookie () method.

If (canAdd = true) {var json = "["; var start = 0; if (len> 4) {start = 1 ;}for (var I = start; I
 
  

  
In this way, we obtain the cookie information of the user's browsing history. The cookie name is hisArt and the value is in JSON format, for example, [{"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. On the demo page corresponding to this example, you must first obtain the browsed history cookie: hisArt value, 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[i].title+"";   }   $("#list").html(list); }); 
   
  

  
We placed a # list in the demo page. Of course, this page also needs to be preloaded with the jquery library and cookie plug-in.

  
The above is all the content in this article, hoping to help you learn the cookie plug-in.