javascript - Cookie Bar 未在本地显示

Question

您好，我目前正在制作一个简单的 cookie 栏，但是，我在本地测试时遇到了问题。到目前为止，我已经在 J​​S.Fiddle here 中对此进行了测试并且似乎按照我的意愿工作。

我已经检查并已将 jquery-2.2.4.min.js 添加到文件中以使其正常工作。

这是我正在使用的。

var clearCookie = function () {
    var result = $.removeCookie('JSFiddleCookieNotification');
    if (result) {
        alert('Cookie removed, please reload.');
    } else {
        alert('Error: Cookie not deleted');
    }
}

var closeCookie = function () {
    $("#notification").toggle("slide", {
        direction: "down"
    });
    $.cookie('JSFiddleCookieNotification', 'Notified', {
        expires: 7
    });
}

// Bind the buttons
$("#clearCookie").on("click", clearCookie);
$("#closeCookie").on("click", closeCookie);

// Now display the cookie if we need to
if ($.cookie('JSFiddleCookieNotification') == null) {
    $("#notification").effect({
        effect: "slide",
        direction: "down",
        duration: 600
    });
}

.hidden {
    display:none;
}
.cookie {
    bottom: -20px;
}
.cookie-wrapper {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 150%;
    padding: 15px 45px 30px 15px;
    text-align: left;
    position: fixed;
    left: 0;
    /*background: rgba(18, 108, 177, 0.901961);*/
    background: #de291e;
    color: #fff;
    width: 100%;
}
.btn {
    display: inline-block;
    float: right;
    width: 15%;
    text-decoration: none;
    margin-bottom: 0px;
    margin-right: 30px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75);
    background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
    background-image: -o-linear-gradient(top, #fff, #e6e6e6);
    background-image: linear-gradient(to bottom, #fff, #e6e6e6);
    background-image: repeat-x;
    border: 1px solid #ccc;
    border-bottom-color: #b3b3b3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    *margin-left: 3em;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.05);
    outline:none !important;
    padding: 1px 7px !important;
}
.btn:hover, .btn:focus {
    color: #333;
    text-decoration: none;
    background-position: 0 -15px;
    -webkit-transition: background-position .1s linear;
    -moz-transition: background-position .1s linear;
    -o-transition: background-position .1s linear;
    transition: background-position .1s linear;
}
.btn:hover, .btn:focus, .btn:active, .active.btn, .disabled.btn, [disabled].btn {
    background-color: #e6e6e6;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="header">
     <h2>Cookie Notification demo</h2>
</div>

<div id="contentArea">
    <input id="clearCookie" type="button" value="Delete Cookie" />
</div>

<div id="notification" class="cookie-wrapper cookie hidden">
    <p>This site uses cookies! <a id="closeCookie" class="btn" href="#">Close</a>
    </p>
</div>

Answer 1

根据 cookie 规范，只有指定两个或三个句点的域才能设置 cookie。

这意味着它不能在 localhost 上运行。

例如 example.com 和 subdomain.example.com 将起作用，因为它们根据 cookie 规范满足要求，而 localhost 不't。

通过在主机文件中设置一些域名来屏蔽您的本地环境，尝试解决方法。

参见: https://curl.haxx.se/rfc/cookie_spec.html (在“域”下)