jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
下面是详细讲解“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 中存储的内容大小是有限制的，如果收藏的页面过多或者页面地址过长，就可能会超过限制而导致无法正常的存储。因此，在实际应用中，还需要根据实际情况进行相关优化。