如何使用 Onclick Jquery 事件为整个登录会话设置 Cookie

Question

Here i like explain my problem clearly,

Actually am having a notification icon in my appication, which is used to show count of rows in table called Delay. like below

so now what i need is, when i used click the notification icon it must set cookie and then after 5 seconds count will automatically fadeout.

then if cookie is equal to the cookie which i set, it must hide the div #not-count for 1 hour.

this my code for fadeout after 5 seconds without cookie

$(document).ready(function($){

        $('#notify-comet').on('click', function(e){
            setTimeout(function() {
                $('#not-count').fadeOut('fast');
            }, 1000); 
        })

    }) 

Help me to sort out this.

Answer 1

Here is the fiddle .

Here is the markup

<input type='button' value='btn' id='notify-comet' />
<div id='not-count'>test</div>

Here is the code (you may want to wrap it in the proper lexical scope)

var x = readCookie('notCount')

if(x)
{
    $('#not-count').hide();
}

$('#notify-comet').on('click', function(e){
    if(!x)
    {
        setTimeout(function() {
            //I've set the 'notCount' cookie to expire in 1 minute. You can set it to 60 minutes
            createCookie('notCount', 'true', 1);
            $('#not-count').fadeOut('fast');       
        }, 5000);       
    }

});

function createCookie(name,value,minutes) {
    if (minutes) {
        var date = new Date();
        date.setTime(date.getTime()+(minutes*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    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,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

Create/Read cookie functions taken from this SO thread solution by @Mandeep Janjua