下面是详细讲解“jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)”的完整攻略。
简介
本攻略主要讲解如何利用 jQuery 和 Cookie 实现一个本地收藏功能,在用户点击收藏按钮时,可以将当前页面地址存储在 Cookie 中,这样用户在下次打开网站时,还可以看到之前所收藏的内容。
步骤
步骤一:引入 jQuery 和 Cookie 库
在 head 中引用 jQuery 和 Cookie 库:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
步骤二:添加收藏按钮
在需要添加收藏功能的页面中,添加一个收藏按钮,如下所示:
<button id="add-favorite-btn">添加收藏</button>
步骤三:绑定收藏事件
在 jQuery 中绑定按钮的 click 事件,获取当前页面的地址,并将其存储在 Cookie 中。为了防止用户多次点击收藏按钮造成重复的存储,我们需要先检查 Cookie 中是否已经存在当前页面的地址。
$(function() {
$('#add-favorite-btn').click(function() {
var url = window.location.href;
var favoriteList = $.cookie('favoriteList');
if (favoriteList) {
// 如果 Cookie 中已经有收藏列表,判断当前页面是否已经收藏
if (favoriteList.indexOf(url) !== -1) {
alert('该页面已经收藏过了!');
return;
}
favoriteList += '|' + url;
} else {
favoriteList = url;
}
// 将收藏列表保存到 Cookie 中
$.cookie('favoriteList', favoriteList);
alert('收藏成功!');
});
});
上述代码首先获取当前页面的地址,然后从 Cookie 中获取收藏列表。如果收藏列表存在,就判断当前页面是否已经收藏过,如果收藏过就弹出提示信息并直接返回;否则将当前页面的地址添加到收藏列表的末尾,以 "|" 分隔。如果收藏列表不存在,就直接将当前页面的地址作为收藏列表保存到 Cookie 中,并弹出提示信息。
步骤四:获取已收藏列表
在需要展示收藏列表的页面中,通过 jQuery 和 Cookie 库获取已收藏的地址列表,并根据需要进行展示。
$(function() {
var favoriteList = $.cookie('favoriteList');
if (favoriteList) {
// 如果 Cookie 中存在收藏列表,就展示收藏列表
var urls = favoriteList.split('|');
var listHtml = '';
$.each(urls, function(index, url) {
listHtml += '<li><a href="' + url + '">' + url + '</a></li>';
});
$('#favorite-list').html(listHtml);
} else {
$('#favorite-list').html('<li>暂无收藏</li>');
}
});
上述代码首先从 Cookie 中获取收藏列表,如果收藏列表存在,就将列表中的地址分割成数组,并遍历每个地址,将其展示为一个链接。如果收藏列表不存在,就展示一条提示信息。展示收藏列表的代码可以自定义,上述代码只是为了演示添加的效果。
示例
下面是两个针对不同网页的示例,以演示如何添加和展示收藏列表。
示例一
网页链接:http://example.com/page1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例一</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(function() {
$('#add-favorite-btn').click(function() {
var url = window.location.href;
var favoriteList = $.cookie('favoriteList');
if (favoriteList) {
// 如果 Cookie 中已经有收藏列表,判断当前页面是否已经收藏
if (favoriteList.indexOf(url) !== -1) {
alert('该页面已经收藏过了!');
return;
}
favoriteList += '|' + url;
} else {
favoriteList = url;
}
// 将收藏列表保存到 Cookie 中
$.cookie('favoriteList', favoriteList);
alert('收藏成功!');
});
var favoriteList = $.cookie('favoriteList');
if (favoriteList) {
var urls = favoriteList.split('|');
var listHtml = '';
$.each(urls, function(index, url) {
listHtml += '<li><a href="' + url + '">' + url + '</a></li>';
});
$('#favorite-list').html(listHtml);
} else {
$('#favorite-list').html('<li>暂无收藏</li>');
}
});
</script>
</head>
<body>
<h1>示例一</h1>
<p>这是示例一的内容。</p>
<button id="add-favorite-btn">添加收藏</button>
<ul id="favorite-list"></ul>
</body>
</html>
示例二
网页链接:http://example.com/page2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例二</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(function() {
$('#add-favorite-btn').click(function() {
var url = window.location.href;
var favoriteList = $.cookie('favoriteList');
if (favoriteList) {
// 如果 Cookie 中已经有收藏列表,判断当前页面是否已经收藏
if (favoriteList.indexOf(url) !== -1) {
alert('该页面已经收藏过了!');
return;
}
favoriteList += '|' + url;
} else {
favoriteList = url;
}
// 将收藏列表保存到 Cookie 中
$.cookie('favoriteList', favoriteList);
alert('收藏成功!');
});
var favoriteList = $.cookie('favoriteList');
if (favoriteList) {
var urls = favoriteList.split('|');
var listHtml = '';
$.each(urls, function(index, url) {
listHtml += '<li><a href="' + url + '">' + url + '</a></li>';
});
$('#favorite-list').html(listHtml);
} else {
$('#favorite-list').html('<li>暂无收藏</li>');
}
});
</script>
</head>
<body>
<h1>示例二</h1>
<p>这是示例二的内容。</p>
<button id="add-favorite-btn">添加收藏</button>
<ul id="favorite-list"></ul>
</body>
</html>
总结
以上就是利用 jQuery 和 Cookie 实现本地收藏功能的攻略。需要注意的是,Cookie 中存储的内容大小是有限制的,如果收藏的页面过多或者页面地址过长,就可能会超过限制而导致无法正常的存储。因此,在实际应用中,还需要根据实际情况进行相关优化。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQuery利用cookie 实现本地收藏功能(不重复无需多次命名) - Python技术站