通过Jquery.cookie.js实现展示浏览网页的历史记录超管用

本文给大家分享利用cookie插件获取用户浏览文章或者是网页的历史记录，并把用户最近浏览过的信息显示在页面，涉及到 jquery.cookie.js相关知识，感兴趣的朋友可以参考下

本文就是要利用cookie插件，获取用户浏览文章历史记录，并将用户最近浏览历史记录显示在页面。

在需要添加cookie的页面加上如下js

1. <script type="text/javascript" src="js/jquery.js"></script> 
2. <script type="text/javascript" src="js/jquery.cookie.js"></script> 
3. <script type="text/javascript"> 
4. $(function(){ 
5. var art_title = $("title").html(); 
6. var art_url = document.URL; 
7. var history; 
8. var json="["; 
9. //json1是第一次注入cookie以后的第一个json，"此时还不是数组" 以点带面的处理 
10. var json1; 
11. var canAdd= true; 
12. //var json1=eval("({sitename:'dreamdu',sitedate:new Date(1980, 12, 17, 12, 0, 0)})"); 
13. if(!$.cookie("history")){ 
14. //第一次的时候需要初始化 
15. history = $.cookie("history","{title:/""+art_title+"/""+",url:/""+art_url+"/"}"); 
16. }else { 
17. //已经存在 
18. history = $.cookie("history"); 
19. json1 = eval("("+history+")"); 
20. $(json1).each(function(){ 
21. if(this.title==art_title){ 
22. canAdd=false; 
23. return false; 
24. } 
25. }) 
26. if(canAdd){ 
27. $(json1).each(function(){ 
28. json = json + "{/"title/":/""+this.title+"/",/"url/":/""+this.url+"/"},"; 
29. }) 
30. json = json + "{/"title/":/""+art_title+"/",/"url/":/""+art_url+"/"}]";  
31. $.cookie("history",json,{expires:1}); 
32. } 
33. } 
34. }) 
35. </script> 

在展示历史记录的页面添加如下js

1. <script type="text/javascript" src="js/jquery.js"></script> 
2. <script type="text/javascript" src="js/jquery.cookie.js"></script> 
3. <script type="text/javascript"> 
4. $(function(){  
5. if($.cookie("history")){ 
6. var json = eval("("+$.cookie("history")+")");  
7. var list ="";  
8. $(json).each(function(){ 
9. list = list + "<li><a href='"+this.url+"' target='_blank'>"+this.title+"</a></li>"; 
10. alert(this.url); 
11. }) 
12. $("#list").html(list);; 
13. }  
14. });  
15. </script> 
16. </head> 

以上内容是小编给大家分享的通过Jquery.cookie.js实现展示浏览网页的历史记录，希望大家喜欢。