For example i have a <P>tag contain a class as below
<p class="badge">new</p>
and i do like to add some CSS for the element, when the user .onclick(), so i created a function like below
$(".badge").click(function(){
$(".badge").css("display","none");
});
And the question is how may i use cookies to remember that the user had already clicked before, so the css will be added automatically?
You're better off using window.localStorage
$(".badge").click(function(){
$(".badge").css("display","none");
localStorage.setItem('btnClicked', true);
});
And on document load you should check if the user has clicked the button before and act accordingly:
$(document).ready(function (){
var clicked = localStorage.getItem("btnClicked");
if(clicked){
$(".badge").css("display","none");
}
});
You could use the jQuery cookie library:-
Create expiring cookie, 7 days from then:
$.cookie('name', 'value', { expires: 7 });Read cookie:
$.cookie('name'); // => "value"
So your code could work like:-
$(".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>If you want to use cookies, try this sample:
$(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
});
});
But, as noticed @guradio, you can use localStorage to do that:
$(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 makes your code more compact an elegant :)
The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.
The two mechanisms within Web Storage are as follows:
sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores)
localStorage does the same thing, but persists even when the browser is closed and reopened.
sessionStorage is similar to localStorage, the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends.
