JS使用实现记录客户浏览记录

最新推荐文章于 2023-08-21 09:02:11 发布
最新推荐文章于 2023-08-21 09:02:11 发布
阅读量3.3k 收藏 10
点赞数
分类专栏： JS 文章标签： cookie javascript 浏览记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cainiao_ACCP/article/details/62892409
版权

实现使用Cookie记录浏览记录的方式比较多，如使用jquery.cookie.js插件，这里使用js原生实现，当然当中也用到了jquery取值和遍历（就因为jQuery用着太方便了）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery-2.0.0.min.js" ></script>
        <script type="text/javascript">
            function imgClick(t) {
                var array = new Array();
                var res = getCookie("img_");
                var imgJson = {"src": $(t).attr("src"), "title": $(t).attr("title")};
                if (res != '') {
                    var index = -1;
                    array = jQuery.parseJSON(res);
                    $.each(array, function(k ,v) {
                        if (v.src == $(t).attr("src")) {
                            index = jQuery.inArray(v, array);
                        }
                    });
                    if (index > -1) {
                        // jQuery和JS并没有单独用于删除数组中值的方法，但可以用splice()通过复查分割实现
                        array.splice(index,1);// 删除与当前重复的记录
                    }

                }
                array.push(imgJson);
                // 最多显示4条记录
                if (array.length > 4) {
                    array.splice(0,array.length - 4);
                }
                setCookie("img_", JSON.stringify(array), 5 * 60 * 1000); // 有效期为5分钟
            }

            /**
             * 创建和存储cookie
             * @param {Object} name 名称
             * @param {Object} value 值
             * @param {Object} expiredays 有效时间，单位：毫秒
             */
            function setCookie(name, value, expiredays) {
                var exDate = new Date();
                // 设置有效时间
                exDate.setTime(exDate.getTime() + expiredays);
                if(expiredays == null) {
                    document.cookie = name + "=" + escape(value);
                } else {
                    document.cookie = name + "=" + escape(value) + ";expires=" + exDate.toGMTString();
                }
            }

            /**
             * 获取cookie中的值
             * @param {Object} name
             */
            function getCookie(name) {
                if(document.cookie.length > 0) {
                    var start = document.cookie.indexOf(name + "=");
                    if(start != -1) {
                        start = document.cookie.indexOf("=", start) + 1;
                        var end = document.cookie.indexOf(';', start);
                        if(end == -1) end = document.cookie.length;
                        return unescape(document.cookie.substring(start, end));
                    }
                }

                return "";
            }

            function findCookie() {
                var res = getCookie("img_");
                console.log(res);
                if (res != "") {
                    var imgJson = jQuery.parseJSON(res);
                    $.each(imgJson, function(k, v) {
                        var img = '<img src="'+ v.src +'" title="' + v.title + '" style="border: 1px solid blue;"/>';
                        $("#divTest").html($("#divTest").html() + img);
                    });
                }
            }
        </script>
    </head>

    <body onload="findCookie()">
        <div style="width: 900px; height: 500px; margin: 30px;margin-bottom: 0px;border: 1px solid red;overflow-y: auto;">
            <img src="img/avatar.png" title="人物1" style="border: 1px solid blue;" onclick="imgClick(this)" />&nbsp;
            <img src="img/avatar04.png" title="人物2" style="border: 1px solid blue;" onclick="imgClick(this)" />&nbsp;
            <img src="img/avatar2.png" title="人物3" style="border: 1px solid blue;" onclick="imgClick(this)" />&nbsp;
            <img src="img/avatar3.png" title="人物4" style="border: 1px solid blue;" onclick="imgClick(this)" />&nbsp;
            <img src="img/avatar5.png" title="人物5" style="border: 1px solid blue;" onclick="imgClick(this)" />&nbsp;
            <img src="img/photo3.jpg" title="人物6" width="128" height="128" style="border: 1px solid blue;" onclick="imgClick(this)" />&nbsp;
            <img src="img/user3-128x128.jpg" title="人物7" style="border: 1px solid blue;" onclick="imgClick(this)" />&nbsp;
            <img src="img/user4-128x128.jpg" title="人物8" style="border: 1px solid blue;" onclick="imgClick(this)" />&nbsp;
            <img src="img/user7-128x128.jpg" title="人物9" style="border: 1px solid blue;" onclick="imgClick(this)" />
        </div>
        <div id="divTest" style="width: 900px; height: 500px; margin: 30px;margin-bottom: 0px;border: 1px solid red;"></div>
    </body>

</html>

图片大家自己找几张替换了即可

CrapeMyrtles
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【004JavaScript Window History】完全掌握浏览器历史记录的使用技巧
燃正科技
06-08 1230
本教程将详细介绍JavaScript Window History对象及其在浏览器中的应用。
js 实现浏览历史记录示例
10-26
主要介绍了如何使用js实现浏览历史记录,需要的朋友可以参考下
javascript与浏览器的数据交互
seacean2000的专栏
10-28 2280
1.从浏览器中获取数据 2.向浏览器中s
Js实现2个浏览器窗口数据交互window.postMessage()方法
XiaoCheng_T的博客
03-25 4179
一、window.postMessage是什么？ 根据官方给定的理解如下: window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。 从广义上讲，一个窗
js历史查询记录功能
weixin_44134816的博客
08-10 747
js历史查询记录功能。
使用 JavaScript 分析用户访问行为数据
weixin_33796205的博客
03-26 377
我们都知道用户在网站上的访问行为数据是一座金矿，如果能恰当地加以分析，我们便能了解到用户在网站上做了些什么、体验如何，有时还能帮助我们发现一些从未注意到的问题，比如某个错误的交互设计等。但遗憾的是，传统的 UED（用户体验设计）部门通常只负责制作页面，或者至多再参与一些原始数据的收集工作（这个工作一般需要由 UED 的前端开发工程师来完成），却很少涉及到具体的数据分析。 当然，现代 UE...
js记录用户在网站的浏览记录和停留时间(2)
weixin_33896726的博客
09-22 1097
问题：上次的代码确实解决了一部分用户访问记录的收集，但是还是存在一个问题就是 我们网站的注册 都是新页面打开的，如果用户刚进入网站就点击注册（打开了新的页面） ，我代码里用到的 onbeforeunload 就无法将用户进入的页面存储到本地了，也就是导致 访问了网站 直接点击注册的用户 无法被记录。所以这次对数据的记录方式做了拆分。 这个...
js记录点击次数_一步一步搭建前端监控系统：如何记录用户行为？
weixin_39901518的博客
11-19 1614
摘要： 通过记录用户行为，快速复现BUG场景。作者：一步一个脚印一个坑原文：搭建前端监控系统（备选）用户行为统计和监控篇（如何快速定位线上问题）Fundebug经授权转载，版权归原作者所有。一步一步搭建前端监控系统系列博客：一步一步搭建前端监控系统：JS错误监控篇一步一步搭建前端监控系统：如何将网页截图上报？一步一步搭建前端监控系统：接口请求异常监控篇一步一步搭建前端监控系统：如何定位前端线上问题...
html记录访客信息代码,[JS]记录访客最近浏览网页js代码
weixin_29476595的博客
06-08 1060
1.[代码][JavaScript]代码网页特效 js记录访客最近浏览过的网页刷新一下试试！把下面的代码放到要记录“访客最近浏览过的网页”的页面中就可以了。您最近浏览过的网页未找到您最近浏览过的网页if(navigator.cookieEnabled){//判断是否支持Cookievar tag = document.getElementById("www_zzjs_net");//输出结果DIV...
JavaScript实现用户行为跟踪收集
热门推荐
Carey
05-05 1万+
收集用户隐私的行径眼下已不再是什么新鲜的话题（与其说是收集，不如说是偷窥），就连G、MS也屡出风头，当然事出有因，企业通过无法八门的各种手段了解用户的行为，进而作为决策支持的依据；通常表现为跨领域的收集（浏览器、智能系统、OS etc.）、业务、产品数据的收集，当然收集的方式也不一而论。以下展示通过客户端脚本方式收集Web站点用户行为数据的实现方式，以此来判断页面加载过程、执行时间、用户停留时
jQuery.cookie.js实现记录最近浏览过的商品功能示例
10-20
主要介绍了jQuery.cookie.js实现记录最近浏览过的商品功能,结合实例形式分析了基于jQuery.cookie.js插件创建cookie及保存浏览记录的操作技巧,需要的朋友可以参考下
js操作cookie保存浏览记录的方法
10-23
主要介绍了js操作cookie保存浏览记录的方法,涉及JavaScript使用cookie记录并保存用户浏览网页信息的实现技巧,需要的朋友可以参考下
JS+COOKIE+JSON记录用户浏览过的文章
09-15
JS+COOKIE+JSON记录用户浏览过的文章
cookie封装
ddr66288的博客
03-13 193
var cookie = { set: function (key, val, time) {//设置cookie方法 var date = new Date(); //获取当前时间 var expiresDays = time; //将date设置为n天以后的时间 date.setTime(date.ge...
js很简单实现页面浏览次数统计
qq_26889291的博客
12-19 2010
注意需部署到线上才生效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
JavaScript 显示数据
最新发布
qq_46538844的博客
08-21 661
<meta charset="utf-8" /> <title></title> </head> <body> <button onclick="myFunction()">点击按钮执行函数</button> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title>
JS—demo（一）用JS实现浏览历史记录功能
w292301966的博客
07-01 1万+
记得以前学JS的时候。那个COOKIE就没有搞清楚。太麻烦了哈。不像PHP一个函数什么都搞定了。他那个COOKIE一多就不得了。那字符串截的头晕。 所以织梦写的这两个函数很重要。他直接简化了JS的COOKIE。让他由复杂变的简单了。这两个函数在AJAX里面的。 //读写cookie函数 function GetCookie(c_name) { &nbsp;if (document.coo...
(二)、JavaScript页面访问记录(History 对象)
彼岸花的博客
12-20 6201
(二)、JavaScript页面访问记录(History 对象)history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。语法：window.history.[属性|方法]注意：window可以省略。History 对象属性Hi
JS对省市按首字母排序
疯子的博客
11-03 1万+
/** * 省市拼音排序 */ function pySegSort(arr, empty) { if(!String.prototype.localeCompare) return null; var letters = "*ABCDEFGHJKLMNOPQRSTWXYZ".split(''); var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它
html历史记录代码,js 实现浏览历史记录示例
05-31
下面是一个简单的示例，展示如何使用 HTML 和 JavaScript 实现浏览历史记录功能。 HTML 代码： ```html <!DOCTYPE html> 浏览历史记录示例 浏览历史记录示例 点击下面的链接来添加浏览记录： <li><a ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值