2013-09-04 3 views
2

Я работаю над созданием баннера на своем веб-сайте, чтобы информировать посетителей о куках. Я хочу применить этот баннер, используя jquery, и когда люди нажимают «ОК», он должен уходить. Эта часть, которую я могу сделать, но я хочу, чтобы она снова появилась, если они снова посетили сайт через 24 часа. Думаю, я могу сделать это с помощью печенья, но я не совсем уверен, как это сделать. Может кто-то указать мне верное направление?Как вызвать функцию jquery один раз каждые 24 часа?

+0

Cookie является лучшим выбором, но не будет работать, если у людей есть их выключен. – CP510

+0

Я не могу помочь в отделе jQuery, но я был бы осторожен в том, чтобы показывать баннер каждые 24 часа, так как вы будете раздражать многих людей и потенциально их отгонять. Какова цель показа баннера после того, как они уже приняли политику файлов cookie? – timgavin

+0

Я согласен с @Tim, это недостаток дизайна UX. – CP510

ответ

1

JQuery не имеет встроенного обработчика файлов cookie, но его действительно не так сложно в обычных js. Поскольку @Tim упомянул, что это плохой дизайн пользовательского опыта, вы не должны раздражать людей такими всплывающими окнами. Достаточно один раз. Но я понимаю, почему вы, возможно, захотите убедиться, что он не всплывает каждый раз. Если вы хотите, вы можете установить дату в ОЧЕНЬ дату будущего, чтобы предотвратить ее появление снова, пока пользователь не очистит файлы 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 * }

+0

, хотя это довольно хороший ответ для файлов cookie, пожалуйста, не используйте w3schools для будущих ссылок. – PlantTheIdea

+0

Почему? Это действительно так? Я имею в виду, что я мог бы переписать его проще, если ссылки не разрешены или что-то в этом роде. – CP510

+0

w3 как организация осудил его, потому что он проливает плохую информацию, а также извлекает выгоду из незнания пользователей через их сертификаты быка ****. его просто хорошая практика, чтобы привести более подходящий и законный источник. http://www.w3fools.com/ – PlantTheIdea

1

Я хотел бы использовать LocalStorage, добавив текущую дату по щелчку:

var curDate = new Date(); 

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

Затем проверьте, существует ли он, и сравнили да tes:

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% пользователей по всему миру.

+0

Локальное хранилище - это приятный штрих, но не полностью совместимый с кросс-платформой. – CP510

+0

yep, отредактировал мой ответ соответственно. – PlantTheIdea

+0

99.2% довольно специфично. = P – CP510

0

Для меньше кода, проще реализация попробовать это:

jquery.cookie

Примеры:

Создать печенье:

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

Читайте печенье:

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

Создать истекающее печенье (истекающий через 7 дней):

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

Source

0

Вы можете решить эту проблему, используя при написании очень простой 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. */ 
} 

Вы также можете указать собственное определение "свежие:"

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

Обратите внимание Для удобства для пользователя! , Я сделал эту функцию автоматически возвращает false, когда пользователь отключил cookies, чтобы предотвратить это meone без файлов cookie перегружены баннерными объявлениями. Я считаю, что это правильный способ лечения людей, посещающих мой сайт, но если вы хотите отменить это уважительное поведение, не стесняйтесь настраивать логику в моем коде freshVisitor().

Конечно, вам нужны соответствующие функции куки, которые могут рассчитать сроки годности с использованием нотации выше, поэтому здесь полный код:

<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> 
Смежные вопросы