JS+COOKIE+JSON记录用户浏览过的文章_其它特效_jQuery插件_cookie

淘建站为您提供更多_其它特效_jQuery插件_cookie，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 50 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

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

引入jQuery库和cookie插件

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

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

本文以精选网址作为测试地址，记录该栏目浏览过的历史。

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