javascript - How to hide element with jquery depends on cookie value?

Question

Firstly, I need set cookie cookiesshow to value true, after button click I need ask if cookiesshow is true and if it is hide element and then set value of cookiesshow to false but it doesn't work.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script>
$(document).ready(function(){
    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 "";
    }

    if (getCookie("cookiesshow") != false)
    {
        document.cookie = "cookiesshow=true";
    }
    else
    {
        $("#cookiebar").hide();
    }

    $("#cookiebutton").click(function(){
        var cookie = getCookie("cookiesshow");
        console.log(cookie);
        if (cookie == "true") {
            $("#cookiebar").hide(1000);
            document.cookie = "cookiesshow=false";
        }
    })
});
</script>

<div class="cookiebar" id="cookiebar"><span>This web using cookies. If you disagree with using cookies, please leave this page. </span><button class="cookiebutton" id="cookiebutton">Accept cookies</button></div>

标签： javascriptjquery

Answer 1

设置 cookie 时，所有 cookie 都将保存为字符串。

$(document).ready(function(){
    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 "";
    }

    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires="+d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    if (getCookie("cookiesshow") !== "false")
    {
        setCookie("cookiesshow",true,3650);
        //document.cookie = "cookiesshow=true";
    }

    $("#cookiebutton").click(function(){
        var cookie = getCookie("cookiesshow");
        console.log(cookie);
        if (cookie === "true") {
            $("#cookiebar").hide(1000);
            setCookie("cookiesshow",false,3650);
            //document.cookie = "cookiesshow=false";
        }
    })
});