Question

我正努力在我的网站上获取横幅，以告知访问者有关Cookie的信息。我想使用jquery来应用这个横幅，当人们点击＆＃34; OK＆＃34;它应该消失。我可以做的那部分，但如果他们在24小时后再次访问该网站，我希望它再次出现。我想我可以用cookie做到这一点，但我不太确定如何解决这个问题。有人能指出我正确的方向吗？

Answer 1

JQuery没有内置的cookie处理程序，但它在常规js中确实不那么难。正如@Tim所提到的那样，这是一个糟糕的用户体验设计，你不应该用这样的弹出窗口来惹恼别人。一次就够了。但我明白为什么你可能想确保它不会每次都弹出。如果您愿意，可以将日期设置为非常远的日期，以防止它再次出现，直到用户清除那些cookie为止。

像这样设置cookie

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

并像这样检索它。

function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
  {
  c_start = c_value.indexOf(c_name + "=");
  }
if (c_start == -1)
  {
  c_value = null;
  }
else
  {
  c_start = c_value.indexOf("=", c_start) + 1;
  var c_end = c_value.indexOf(";", c_start);
  if (c_end == -1)
  {
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}

你可以使用像这样的整个事情......

function checkCookie()
{
var username=getCookie("username");
  if (username!=null && username!="")
  {
  alert("Welcome again " + username);
  }
else 
  {
  username=prompt("Please enter your name:","");
  if (username!=null && username!="")
    {
    setCookie("username",username,365);
    }
  }

*直接从这里拍摄http://www.w3schools.com/js/js_cookies.asp * }

Answer 2

我会使用localStorage，在点击时添加当前日期：

var curDate = new Date();

$('#Button').on('click',function(){
    localStorage['banner'] = curDate.getDate();
});

然后检查它是否存在，并比较日期：

if(localStorage['banner'].length > 0){
    var future = new Date();
    future.setDate(localStorage['banner'] + (24 * 60 * 60 * 1000));

    if(future > curDate){
        localStorage['banner'].length = 0;
    }
}

如果他们使用相同的浏览器，就像cookie一样，这将有效。请注意，这仅适用于IE8及更高版本，仅涵盖全球99.2％的用户。

Answer 3

对于更少的代码，更简单的实现尝试：

jquery.cookie

示例：

创建一个cookie：

$.cookie('the_cookie', 'the_value');

阅读cookie：

var cookieval = $.cookie('the_cookie');

创建一个过期的cookie（7天后过期）：

$.cookie('the_cookie', 'the_value', { expires: 7 });

Source

Answer 4

您可以通过编写一个非常简单的freshVistor(howFresh)函数来解决这个问题，该函数接受一个可选参数来定义您认为“新鲜”的新鲜程度。

function freshVisitor(howFresh) {
    var namespace = 'freshVisitorSOCookie';
    if (readCookie(namespace)) {
        return false;
    }
    return makeCookie(namespace, 'yes', {
        expires: howFresh || 1
    });
}

您的应用可以使用freshVisitor()这样的功能：

if (freshVisitor()) {
    /* This means the user is new or has not visited within 1 day
     * So show your banner or do something that you want to do */
} else {
    /* The user has visited already within the previous day
     * or has disabled cookies. */
}

您还可以指定自己的“fresh：”

定义

if (freshVisitor(2)) ... /* uses a 2-day period to calculate freshness */

请注意！为了用户友好，我已经使用此功能在用户禁用cookie时自动返回错误，以防止没有cookie的人被横幅广告所淹没。我相信这是对待访问我网站的人的正确方法，但如果您希望扭转这种尊重的行为，请随意调整我的freshVisitor()代码中的逻辑。

当然，你需要适当的cookie函数，可以使用上面的符号计算到期日期，所以这里是完整的代码：

<script>
    function makeCookie(name, value, p) {
        var s, k;

        function reldate(days) {
            var d;
            d = new Date();
            d.setTime(d.getTime() + days * 86400000);
            return d.toGMTString();
        }
        s = escape(name) + '=' + escape(value);
        if (p)
            for (k in p) {

                /* convert a numeric expires value to a relative date */

                if (k == 'expires')
                    p[k] = isNaN(p[k]) ? p[k] : reldate(p[k]);

                /* The secure property is the only special case
here, and it causes two problems. Rather than
being '; protocol=secure' like all other
properties, the secure property is set by
appending '; secure', so we have to use a
ternary statement to format the string.

The second problem is that secure doesn't have
any value associated with it, so whatever value
people use doesn't matter. However, we don't
want to surprise people who set { secure: false }.
For this reason, we actually do have to check
the value of the secure property so that someone
won't end up with a secure cookie when
they didn't want one. */

                if (p[k])
                    s += '; ' + (k != 'secure' ? k + '=' + p[k] : k);
            }
        document.cookie = s;
        return readCookie(name) == value;
    }

    function readCookie(name) {
        var s = document.cookie,
            i;
        if (s)
            for (i = 0, s = s.split('; '); i < s.length; i++) {
                s[i] = s[i].split('=', 2);
                if (unescape(s[i][0]) == name)
                    return unescape(s[i][1]);
            }
        return null;
    }

    function removeCookie(name) {
        return !makeCookie(name, '', {
            expires: -1
        });
    }

    function freshVisitor(howFresh) {
        var namespace = 'freshVisitorSOCookie';
        if (readCookie(namespace)) {
            return false;
        }
        return makeCookie(namespace, 'yes', {
            expires: howFresh || 1
        });
    }

    document.write('Fresh visitor status: ', freshVisitor());
</script>

如何每24小时调用一次jquery函数？

4 个答案: