I use a Jquery code to hide a div, and I would like that when I click the close button it will save and prevent it from being displayed again to the user when the page is reloaded.
$(document).ready(function() {
$(".info-game--remove").click(function() {
$('#info-game').css("display","none");
});
});
I have seen about cookies but I do not know how to implement this code,
You can use localStorage to store the information whether the button will appear or not.
The first thing is to leave the button natively hidden when loading the page:
<style>
#info-game{
display: none;
}
</style>
When you load the page, you check that localStorage is empty - if it is, you show the button, otherwise nothing will be done and the button will remain hidden:
$(document).ready(function() {
if(!localStorage.infogame) $('#info-game').show();
$(".info-game--remove").click(function() {
localStorage.infogame = "$('#info-game').hide()";
eval(localStorage.infogame);
});
});
Do not forget to clear localStorage when you want to show the button again:
localStorage.removeItem('infogame');
As you yourself said, you can do this with cookies:
$(document).ready(function() {
$(".info-game--remove").click(function() {
$('#info-game').css("display","none");
document.cookie = "infoGameRemoved=true;";
});
});
See this example in fiddle: JavaScript cookie example
NOTE: To test, click% with%, then click% with%, then the cookie is already saved, click% with% again, and click '% with%, every time you click run, it is like giving a F5 , see that if the cookie is true, it does not display if it is changed to false, the div is displayed.