如何为网站不同页面实现独立的Cookie同意按钮及功能

Got it, let's get this sorted so your cookie consent banner only stays closed on the exact page where the user clicks the close button. Right now, your code uses a single site-wide cookie (popupCookie with path=/), which is why closing it on one page hides it everywhere. Here's how to adjust it:

Key Issues in Your Current Code #

• You're using a shared cookie name (popupCookie) for all pages, so every page checks the same value.
• The path=/ setting makes the cookie accessible across your entire site, not just the current page.

Step-by-Step Fix #

We'll create a unique cookie for each page by using the current page's path as part of the cookie name, and restrict the cookie to only the current page's context.

Here's the modified code:

jQuery(document).ready(function ($) {
    // Get unique cookie name based on current page path
    function getPageSpecificCookieName() {
        // Clean up the path to use as a valid cookie name (replace slashes/non-alphanumerics)
        const pagePath = window.location.pathname.replace(/[^a-zA-Z0-9]/g, "_");
        return `popupCookie_${pagePath}`;
    }

    const pageCookieName = getPageSpecificCookieName();

    // Check if the current page's cookie is NOT set to 'closed'
    if (getCookie(pageCookieName) !== 'closed') {
        $('.floating-banner').css("display", "flex").hide().fadeIn();
    }

    // Handle close button click
    $('#close-banner').click(function () {
        $('.floating-banner').fadeOut();
        // Set cookie ONLY for the current page (no path=/ so it defaults to current page's path)
        setCookie(pageCookieName, 'closed', 1);
    });

    // Helper: Get cookie by name
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }

    // Helper: Set cookie without site-wide path
    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        // Remove `path=/` so the cookie is only accessible on the current page's path
        document.cookie = `${cname}=${cvalue};${expires};SameSite=Lax`;
    }
});

What Changed? #

• Page-specific cookie names: The getPageSpecificCookieName() function creates a unique cookie name for each page (e.g., popupCookie_/home for your homepage, popupCookie_/about for your about page) by sanitizing the current URL path.
• No site-wide path: We removed the path=/ parameter from the setCookie function. By default, cookies are tied to the current page's path, so this ensures the cookie only applies to the page where it was set.
• Simplified check: We removed the redundant check for submited since you only care about whether the banner was closed on the current page.

Testing It Out #

1. Load your homepage, close the banner, then refresh—banner stays hidden.
2. Navigate to another page—you'll see the banner again.
3. Close it on that page, refresh, and it stays hidden there, but the homepage will still show it if you go back (unless you closed it there too).

That's exactly what you needed!

内容的提问来源于stack exchange，提问作者Sankar S