通过Jquery.cookie.js实现展示浏览网页的历史记录超
今天我们将一同如何利用cookie插件捕获用户的浏览历史,特别是文章浏览记录,并在页面上展示这些内容。这一过程将涉及到jquery.cookie.js这一强大的JavaScript库。如果你对此话题感兴趣,那么接下来的内容定会让你大开眼界。
设想你在一个网站上浏览文章,而该网站通过cookie插件记录了你访问的每一篇文章。每当你访问新文章时,这个插件会将文章的标题和URL保存在cookie中。这是如何操作的呢?
在你需要记录浏览历史的页面中,需要引入以下JavaScript代码:
```html
$(function(){
var art_title = $("title").html(); // 获取当前文章标题
var art_url = document.URL; // 获取当前文章URL
var history; // 历史记录变量
var json = "["; // 初始化json数组
var canAdd = true; // 是否可以添加新记录的标志位
// 如果不存在cookie中的历史记录,则初始化
if(!$.cookie("history")){
history = $.cookie("history","{title:\""+art_title+"\",url:\""+art_url+"\"}");
} else { // 如果已存在历史记录
history = $.cookie("history");
var json1 = eval("("+history+")"); // 将历史记录转化为数组
$(json1).each(function(){ // 遍历历史记录数组
if(this.title == art_title){ // 如果已存在当前文章记录,则不允许再次添加
canAdd = false;
return false;
}
});
if(canAdd){ // 如果可以添加新记录,则将当前文章信息添加到历史记录数组中
$(json1).each(function(){
json = json + "{\"title\":\""+this.title+"\",\"url\":\""+this.url+"\"},";
});
json = json + "{\"title\":\""+art_title+"\",\"url\":\""+art_url+"\"}]";
$.cookie("history",json,{expires:1}); // 保存更新后的历史记录数组到cookie中
}
}
});
```
接下来,在你想展示历史记录的页面,需要添加以下代码:
```html
$(function(){
if($.cookie("history")){ // 如果存在历史记录cookie
var json = eval("("+$.cookie("history")+")"); // 获取历史记录数组
var list =""; // 用于构建展示的历史记录列表
$(json).each(function(){ // 遍历历史记录数组
list = list + "
});
$("list").html(list); // 将历史记录列表展示在页面中指定位置
}
});
```
这样,每当用户浏览新文章时,他们的浏览历史就会被记录在cookie中。而在你想展示这些历史的页面,就可以通过读取cookie来展示用户的浏览记录了。这就是通过jquery.cookie.js实现展示浏览网页的历史记录的过程。希望这个分享能对你有所帮助,如果你有任何问题或建议,欢迎随时与我们交流。
编程语言
- 通过Jquery.cookie.js实现展示浏览网页的历史记录超
- react+redux仿微信聊天界面
- 详解PHP中的8个魔术常量
- phpStorm2020 注册码
- PHP中COOKIES使用示例
- 简单的js计算器实现
- PHP获取文件扩展名的方法实例总结
- 解决layui上传文件提示上传异常,实际文件已经上
- 去除php注释和去除空格函数分享
- javascript实现详细时间提醒信息效果的方法
- Node.js中用D3.js的方法示例
- php获取apk包信息的方法
- 详解nvm管理多版本node踩坑
- 值得学习的bootstrap fileinput文件上传工具
- AJAX天气预报前台
- Visual Studio 2017安装失败的解决方法