Store "do not show again" with localStorage

Question

I have a div which can be hidden by clicking a button:

$(".fechar").click(function(){
    $("#mensagem").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mensagem">
  <p>(...)</p>
  <button class="fechar">Fechar e não mostrar novamente</button>
</div>

What I need is for her not to appear again after being hidden for the first time.

I found a way with the Jquery dialog, but it does not allow me to customize right, at least not in a simple way, so I need and I prefer it to be like this.

How do I memorize this action in localStorage?

Answer 1

Simple, first you need to capture in your event click that the div was clicked, could be something like:

$(".fechar").click(function(){
    $("#mensagem").hide();
    //definindo que foi clicado
    window.localStorage.setItem('clicado', 'clicado');
});

And in his document.ready(), check whether clicado is set, if you are, hide the div:

$(document).ready(function(){ 
   if(window.localStorage.getItem('clicado')) {
        $("#mensagem").hide(); 
   } 
});

Your final code:

$(".fechar").click(function(){
    $("#mensagem").hide();
    window.localStorage.setItem('clicado', 'clicado');
});

$(document).ready(function(){ 
   if(window.localStorage.getItem('clicado')) {
        $("#mensagem").hide(); 
        console.log('clicado definido')
   } 
});

See working on Jsfiddle: https://jsfiddle.net/x43n7fsu/2/