为什么在Javascript中没有保存cookie

Why is not saved cookies in Javascript?

本文关键字:保存 cookie Javascript 为什么      更新时间:2023-09-26

我有一个网站,我向用户显示一条临时消息。此消息的行为应如下所示:

  • 如果用户正在滚动,消息将消失 - slideUp()
  • 如果用户单击关闭按钮,设置css类.closed并存储在cookie中,从嗡嗡声关闭后再次显示此面板。

当用户单击关闭按钮 ( .info-close ) 面板时,我需要存储一个 cookie,以便在此面板未显示后再次更新。

jsfiddle上有我的问题。

$(document).ready(function(){
    
    var $close = $("#info-panel .info-close");
    var $info_panel = $("#info-panel");
    var $site_main = $(".site-main");
    
    $close.click(function(){
        $info_panel.slideUp();
        $info_panel.addClass("closed");
        // set cookie
        document.cookie = "1";
        // save cookie to "$yes_closed"
        var $yes_closed = document.cookie;
    });
    
    $(window).scroll(function() {
        // if panel has class closed, after click on "X" > dont open
        // or if in cookie "$yes_closed" is save "1" > dont open
        if ($info_panel.hasClass("closed")) {
            $info_panel.hide();
        } else {
            if ($(this).scrollTop() > 0) {
                $info_panel.slideUp();
            } else {
                $info_panel.slideDown();
            }
        }
    
    });
    
});
#info-panel {
    padding: 4px 8px;
    background: yellow;
}
.info-close {
    padding: 5px;
    background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/><br/><br/>
<div id="info-panel">
		<div class="info-text">You are reading documentation for version 9.0.1. Documentation for earlier versions is available as pdfs here.</div>
		<div class="info-close">X</div>
	</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>"Hello my friend"</p>

It is because the cookie is not set properly. You need to add a cookie name and assign value to it. On page load do check if the cookie is set. Based on that show the message.
I have your code fixed here in the jsfiddle. Take a look.
http://jsfiddle.net/ssbiswal1987/9bhnyxwn/