设置 cookie 不适用于 Javascript 或 jQuery答案

【问题标题】：Set cookie not working with Javascript or jQuery设置 cookie 不适用于 Javascript 或 jQuery
【发布时间】：2018-08-10 17:34:54
【问题描述】：

我的问题是通过单击按钮设置 cookie 不起作用。我已经用 3 种不同的方式对其进行了测试。

HTML：

<!DOCTYPE html>
<html dir="ltr">
    <head> [...]
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
        <script src="/cookies/js/jquery.cookie.js"></script>
        <script>
            document.getElementById('btnSetCookie').onclick = function () {
                $.cookie('cookie-1', 'true');
                alert('You have set the cookie: ' + jQuery.cookie('cookie-1'));
            });
            $(function () {
                $("#btnSetCookie").click(function () {
                    jQuery.cookie('cookie-2', 'true');
                    alert('You have set the cookie: ' + jQuery.cookie('cookie-2'));
                });
            });
            $(document).ready(function () {
                $("#btnSetCookie").on('click', function () {
                    $.cookie('cookie-3', 'true');
                    alert('You have set the cookie: ' + jQuery.cookie('cookie-3'));
                });
            });
        </script>
    </head>
    <body> [...]
        <button id="btnSetCookie">set cookie</button> [...]
    </body>
</html>

知道我的错误是什么吗？

【问题讨论】：

您是从 Web 服务器还是从文件系统加载页面？为什么同时有三个事件处理程序？以及访问 jQuery 的两种不同方式。第一个不起作用，因为该按钮在脚本时不存在。请查看控制台（按 F12）
浏览器控制台有哪些错误？我怀疑您需要为 jQuery 库设置协议http(s): - 我发现我需要这样做（取决于浏览器）。第一个版本将无法使用，因为该元素在页面上尚不可用。
你使用的是什么版本的jquery.cookie.js？

标签： javascript jquery cookies onclick jquery-events

【解决方案1】：

这对您不起作用的原因是，如果您不在服务器上运行，则无法设置 cookie。 换句话说，如果您在本地浏览器中使用 file:// 提供文件，它根本行不通。

您的第二个和第三个选项都运行良好。我会清理它们并始终使用 $ 或 jQuery，但是在服务器上运行时两者都可以工作。

这是您的代码工作的demo。

$(document).ready(function () {
  $("#btnSetCookie").on('click', function () {
    $.cookie('cookie-3', 'true');
    alert('You have set the cookie: ' + $.cookie('cookie-3'));
  });
});

您还可以考虑使用更新版本的 jQuery，以及您正在使用的插件（您正在使用的版本不再维护）。事实上，新版本的插件已经完全不再依赖 jQuery 了。

【讨论】：