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>