JS+COOKIE+JSON记录用户浏览过的文章

Cookie可以用来记录客户端用户ID、密码、浏览过的网页、停留的时间等信息，jQuery提供了一个cookie插件，能非常方便的读写cookie信息，若是不明白cookie.js具体用法，请查看教程基于jQuery的cookie插件

分类：其它特效 > jQuery插件难易：中级

查看演示下载资源下载积分： 20 积分

引入jQuery库和cookie插件

<script src="jquery.js" type="text/javascript"></script>
<script src="cookie.js" type="text/javascript"></script>

获取当前文章页面的文章标题和页面地址

本文以素材火<a href="http://www.sucaihuo.com/site" target="_blank">精选网址</a>作为测试地址，记录该栏目浏览过的历史。

1、获取当前文章标题和页面地址

var art_title = $(".head_inner h1").text(); //当前文章标题 var art_url = window.location.href; //当前页面地址

2、获取用户历史浏览记录，并记录长度。

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

3、遍历cookie，并且跟当前文章进行对比

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

4、写入cookie

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: 36,
        path: "/"
    });
}

最后我们在演示页面遍历浏览历史。

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