jQuerycookie插件来做最近浏览资源-CSDN文库

共3个文件

js：2个

html：1个

5星 · 超过95%的资源需积分: 15 127 浏览量 2011-08-31 17:54:49 上传评论收藏 26KB RAR 举报

在网页开发中，为了提供更好的用户体验，经常需要记录用户的浏览历史，例如显示用户最近查看过的产品。在这种场景下，jQuery Cookie插件是一个实用工具，它允许开发者在客户端存储数据，即使页面刷新或关闭，也能持久化用户的浏览信息。本文将详细讲解如何利用jQuery Cookie插件实现"最近浏览"功能。 jQuery Cookie插件是基于JavaScript库jQuery的一个扩展，它使得在浏览器端设置、读取和删除Cookie变得更加简单。要使用这个插件，你需要在项目中引入jQuery库和jQuery Cookie插件的JavaScript文件。假设你的压缩包中包含`history.html`作为示例页面，那么在`history.html`中，你应该添加如下代码引用： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>最近浏览</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  <script src="js/jquery.cookie.js"></script> </head> <body>  </body> </html> ``` 接下来，我们需要编写JavaScript代码来实现"最近浏览"功能。当用户点击产品时，我们将产品的ID或其他唯一标识符存储到Cookie中。这里假设我们有一个产品列表，并且每个产品都有一个`data-id`属性来标识： ```html <div id="product-list"> <div class="product" data-id="1">产品1</div> <div class="product" data-id="2">产品2</div>  </div> ``` 在JavaScript中，我们可以监听`click`事件来处理产品点击： ```javascript $(document).ready(function() { // 当点击产品时，将其ID存入Cookie $('.product').on('click', function() { var productId = $(this).attr('data-id'); // 如果Cookie已存在，获取当前值 var recentViewed = $.cookie('recent_viewed') || []; // 将新产品ID添加到数组 recentViewed.push(productId); // 保持最近浏览的6件商品，超出部分移除 recentViewed = recentViewed.slice(-6); // 使用JSON.stringify转换为字符串，因为Cookie只能存储字符串 $.cookie('recent_viewed', JSON.stringify(recentViewed)); }); // 页面加载时，显示最近浏览的商品 showRecentViewed(); }); function showRecentViewed() { var recentViewedIds = $.cookie('recent_viewed'); if (recentViewedIds) { recentViewedIds = JSON.parse(recentViewedIds); recentViewedIds.forEach(function(productId) { // 根据产品ID获取产品信息，然后在页面上展示 // 这里假设产品信息已经存在于DOM中，实际可能需要向服务器请求 var product = $('.product[data-id="' + productId + '"]'); if (product.length) { // 显示产品 product.addClass('recently-viewed'); } }); } } ``` 以上代码中，我们使用`$.cookie`方法来设置和读取Cookie。当用户点击产品时，我们获取当前的Cookie值（如果存在），将新产品ID添加到数组中，然后将其更新回Cookie。同时，我们确保Cookie中只保留最近的六件商品。页面加载时，调用`showRecentViewed`函数，根据Cookie中的产品ID找到并显示最近浏览的商品。通过这种方式，我们成功地使用jQuery Cookie插件实现了"最近浏览"功能，即使页面被刷新，用户仍能看到他们之前浏览过的六件商品。这增强了用户在网站上的导航体验，同时也为企业提供了收集用户行为数据的可能性。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery.cookie.rar （3个子文件）

jquery-1.4.2.min.js 70KB

jquery.cookie.js 4KB

history.html 2KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> p{ float:left; width:160px; } </style> </head> <body> <div class="myhistory" style="width:960px;margin:0px auto;"> </div> <script src="js/jquery-1.4.2.min.js"></script> <script src="js/jquery.cookie.js"></script> <script> $("document").ready(function(){ var now=new Date(); var number = now.getSeconds()%10; var array="["; if($.cookie("history")!=null){ var obj=eval("("+$.cookie("history")+")"); var sign=true; for(var i=0;i<obj.length;i++){ if (number==obj[i].id){ sign=false; } } for(var i=0;i<obj.length;i++) { if(sign){ if (obj.length>=6){ obj.splice(0,1); } } var data="{\"id\":\""+obj[i].id+"\",\"trimname\":\""+obj[i].trimname+"\",\"url\":\""+obj[i].url+"\",\"img\":\""+obj[i].img+"\"}"; array+=data+","; } if(sign){ array+="{\"id\":\""+number+"\",\"trimname\":\""+"英菲尼迪EX35-3.5-V6-A/MT风华版【进口】"+number+"\",\"url\":\""+"http://www.iautos.cn/usedcar/usedcar_detail.asp?uploadid=1161286"+"\",\"img\":\""+"http://photo.iautos.cn/carupload/photo/2011/0518/small/20110518141602579.jpg"+"\"}," } } else{ array+="{\"id\":\""+number+"\",\"trimname\":\""+"英菲尼迪EX35-3.5-V6-A/MT风华版【进口】"+number+"\",\"url\":\""+"http://www.iautos.cn/usedcar/usedcar_detail.asp?uploadid=1161286"+"\",\"img\":\""+"http://photo.iautos.cn/carupload/photo/2011/0518/small/20110518141602579.jpg"+"\"}," } array=array.substring(0,array.length-1); array+="]"; if($.cookie("history")!=null){ var obj=eval("("+$.cookie("history")+")"); for (var i=0;i<obj.length;i++){ var p="<p><img src='"+obj[i].img+"' /><br/><a href='"+obj[i].url+"'>"+obj[i].trimname+"</a></p>"; $(".myhistory").append(p); } } var date=new Date(); date.setMinutes(date.getMinutes()+15); $.cookie("history",array,{path:'/',expires:date}); // document.write($.cookie("history")); }) </script> </body> </html>

评论收藏

内容反馈