Javascript OnClick функция с печеньем

Question

Например у меня есть <P> тег содержит класс, как показано ниже

<p class="badge">new</p> 

и я хотел бы добавить некоторые CSS для элемента, когда пользователь .onclick(), поэтому я создал функцию как ниже

$(".badge").click(function(){ 
    $(".badge").css("display","none"); 
}); 

И вопрос заключается в том, может ли я использовать куки, чтобы помнить о том, что пользователь уже нажал раньше, так что CSS будет добавлена ​​автоматически?

Answer 1

Вы лучше использовать window.localStorage

$(".badge").click(function(){ 
    $(".badge").css("display","none"); 
    localStorage.setItem('btnClicked', true); 
}); 

И при загрузке документа вы должны проверить, если пользователь, прежде чем нажал на кнопку, и действовать соответствующим образом:

$(document).ready(function(){ 
    var clicked = localStorage.getItem("btnClicked"); 
    if(clicked){ 
     $(".badge").css("display","none"); 
    } 
}); 

Answer 2

Если вы хотите использовать куки , попробуйте этот образец:

$(function() { 

    function getCookie(name) { 

     var matches = document.cookie.match(new RegExp(
     "(?:^|;)" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)" 
     )); 
     return matches ? decodeURIComponent(matches[1]) : undefined; 
    } 

    $('.badge').click(function(){ 

     var 
      cookieValue = +getCookie('counter'); // get cookie 

     $('.badge').css('display' ,'none'); 

     document.cookie = 'counter=' + (cookieValue + 1); // setting a new value 
    }); 

}); 

Но, как замечено @guradio, вы можете использовать localStorage сделать:

$(function() { 

    $('.badge').click(function(){ 

     var 
      counter = +localStorage['counter']; // get counter's value from localStorage 

     $('.badge').css('display' ,'none'); 

     localStorage['counter'] = (counter + 1) // setting a new value 
    }); 

}); 

LocalStorage делает код более компактным элегантным :)

Веб API хранения обеспечивает механизмы, с помощью которых браузеры могут хранить ключ/гораздо более интуитивно понятным способом, чем использование файлов cookie.

Два механизма в рамках Web Storage является следующим:

• sessionStorage поддерживает отдельную область памяти для каждого данного происхождения, которая доступна на протяжении страницы сессии (до тех пор как браузер открытый, включая перезагрузку и восстановление страниц)

• localStorage делает то же самое, но сохраняется, даже когда браузер закрыт и снова открыт.

sessionStorage похож на localStorage, единственное различие в то время как данные, хранящиеся в LocalStorage не имеет набор истечения срока действия, данные, хранящиеся в sessionStorage очищается, когда страница завершения сеанса.

Answer 3

Вы можете использовать jQuery cookie library: -

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

$.cookie('name', 'value', { expires: 7 }); 

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

$.cookie('name'); // => "value" 

Так что ваш код может работать например: -

$(".badge").click(function(){ 
 
    $(".badge").css("display","none"); 
 
    $.cookie('hide-badge', true, { expires: 7 }); 
 
}); 
 

 
$(function(){ 
 
    
 
    if($.cookie('hide-badge')) 
 
    $(".badge").css("display","none"); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 
 

 
<p class="badge">new</p>