无法在 Safari 或 iOS 中使用 JavaScript 设置 Cookie

Question

我正在研究一些 cookie 同意和条款等。所以我制作了一个 JS function 来在用户点击“同意”按钮后设置一个 cookie：

...html

<button onclick="setCookie('law_cookie', 'agree_all', 90)">


...js

function setCookie(name, value, daysToLive) {
    // Encode value in order to escape semicolons, commas, and whitespace
    let cookie = name + "=" + encodeURIComponent(value);

    if (typeof daysToLive === "number") {
        /* Sets the max-age attribute so that the cookie expires
        after the specified number of days */
        cookie += ";max-age=" + (daysToLive * 24 * 60 * 60) + ';Secure;path=/';

        document.cookie = cookie;
        cookie_set = true

    }
}

现在我在 chrom 和 firefox 中进行了测试，一切正常，但是。 safari 无法设置 cookie。 我尝试通过单击按钮进行初始化，但在重新加载 safari 后尚未设置 cookie。

我检查了 javascript 是否已启用（已启用）并且我还尝试设置cookie = encodeURIComponent(cookie); 但没有任何效果。

有人知道我做错了什么吗？

Answer 1

Safari 版本 15.2 与 Chrome 和 Firefox 不同，拒绝在localhost源上设置Secure cookies，因此您需要为 Safari 添加解决方法。

Answer 2

您是否尝试过在 safari 上使用私人标签？ 它可能没有加载您的新文件。 在我的网站上，我使用相同的方法编写 cookies，它适用于 Safari。

Answer 3

编码值是好的

let cookie = name + "=" + encodeURIComponent(value);

但是编码整个刺痛不是：

cookie = encodeURIComponent(cookie);

我修改了你的脚本，我删除了“安全”条目，因为这将限制它只能与 HTTPS 一起使用，当你进行故障排除时给它最好的机会，并且只有在一切正常时才添加安全性。 过去可能适用于某些浏览器：

https://developer.mozilla.org/en-US/docs/web/api/document/cookie

;secure Cookie to only be transmitted over secure protocol as https. Before Chrome 52, this flag could appear with cookies from http domains.

我添加了window.alert所以你会看到 3 件事：

• 证明您的按钮/事件确实命中
• 检查您是否提供了年龄参数（没有年龄，您的条件将不会保存 cookie）
• 将向您显示要保存的值，以便您确认是否正常。

修改后的JS：

function setCookie(name, value, daysToLive) {
    // Encode value in order to escape semicolons, commas, and whitespace
    let cookie = name + "=" + encodeURIComponent(value);

    if (typeof daysToLive === "number") {
        /* Sets the max-age attribute so that the cookie expires
        after the specified number of days */
        cookie += ";max-age=" + (daysToLive * 24 * 60 * 60) + ';path=/';

                window.alert(cookie);
        document.cookie = cookie;
        cookie_set = true
    }
}

setCookie('law_cookie', 'agree_all', 90)

经常使用大量的console.log也有助于故障排除

您是否使用其他一些可能会干扰此的框架？ 可能有人在背后用 cookies 做事。 您是否也尝试从 HTTP header 中保存 cookies？

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie

您是否尝试最小化复制器，制作仍然可以复制问题的最小项目？ 或者从一个小型的独立 JS 小提琴开始：

https://jsfiddle.net/ao9p7e4j/1/

这里我加了一个function来显示cookies看看你有什么