Keep div hidden after a refresh

Question

Speak, people! Beauty?

I’m in need of help :/ I don’t understand anything about JS and I need my div "#custom-social-Proof" to appear only once for the user who enters my site. If he re-load "suspecting that the div will appear dnv" on the page, this div will disappear.

I have searched and realized that the path to solution is using "localStorage" but I have no idea how to do it.

If you can help me.

This is my css:

<style type="text/css">
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600");

  .custom-social-proof {
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 180s; /* Safari 4.0 - 8.0 */
  -webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0*/
  -webkit-animation-delay: 50s;
  -webkit-animation-timing-function: linear;
  animation-name: example;
  animation-duration: 20s;
  animation-iteration-count: 1;
  animation-delay: 1s;
  animation-timing-function: linear;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {background-color:white; left: 8px; bottom: 10px;}
  100% {background-color:white; left: -320px; bottom: 10px;}
}

/* Standard syntax */
@keyframes example {
  0%   {background-color:white; left: 8px; bottom: 10px;}
  100% {background-color:white; left: -320px; bottom: 10px;}
}


.custom-social-proof {
  position: fixed;
  bottom: -100px;
  left: 8px;
  z-index: 9999999999999 !important;
  font-family: 'Open Sans', sans-serif;
}

.custom-social-proof .custom-notification {
  width: 320px;
  border: 0;
  text-align: center;
  z-index: 99999;
  box-sizing: border-box;
  font-weight: 400;
  border-radius: 6px;
  box-shadow: 2px 2px 10px 2px rgba(11, 10, 10, 0.2);
  background-color: #fff;
  position: relative;
}

.custom-social-proof .custom-notification .custom-notification-container {
  display: flex !important;
  align-items: center;
  height: 80px;
}

.custom-social-proof .custom-notification .custom-notification-container .custom-notification-image-wrapper img {
  max-height: 75px;
  width: 90px;
  overflow: hidden;
  border-radius: 6px 0 0 6px;
  object-fit: cover;
}

.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper {
  margin: 0;
  height: 100%;
  color: gray;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 0 6px 6px 0;
  flex: 1;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content {
  font-family: 'Open Sans', sans-serif !important;
  padding: 0 !important;
  margin-bottom: 35px !important;
}

#link {
  background-color: limegreen;
  width: 210px;
  height: 25px;
  position: absolute;
  bottom: 0px;
  color: #fff;
  border-bottom-right-radius: 6px; 
  text-decoration: none;
  font-weight: bold;
}

#link:hover{
  opacity: 0.6;
}



</style>

This is my div:

 <div class="custom-social-proof" id="custom-social-proof">
    <div class="custom-notification">
      <div class="custom-notification-container">
        <div class="custom-notification-image-wrapper">
          <img src="https://surpriz.com.br/wp-content/uploads/2019/09/popup-da-escassez.png">
        </div>
          <div class="custom-notification-content-wrapper">

                <p class="custom-notification-content">
                  <span style="font-size: 15px; line-height: 20px;">O DESCONTO VAI SUMIR! </span><br>
                  <span style="color:#980606; font-weight: bold; font-size: 14px; line-height: 17px;">Desconto de 10% por 3 min </span>
                </p> 

                <a id="link" href="">CLIQUE AQUI</a>            

        </div> 
     </div>
    </div>
  </div>

This JS code I found searching through the internet, but it did not solve my problem. I have no idea what is doing this code, I simply changed the Divs, however, it has not solved my problem.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script type="text/javascript">

document.onreadystatechange = function() {
  var state = document.readyState
  if (state == 'complete') {
    setTimeout(function() {
      document.getElementById('interactive');
      document.getElementById('custom-social-proof').style.visibility = "hidden";

    }, 5000);


window.onbeforeunload = refresh;

function refresh()
{           
localStorage.refresh=1;
}

if(localStorage.refresh==1)
{
document.getElementById('custom-social-proof').style.visibility = "hidden";
localStorage.refresh=0;
}


}

</script>

<script>
window.onbeforeunload = function(event) {
  event.returnValue = "Write something clever here..";
};
</script>

Answer 1

You can use cookies too, so you can control when the user can see the div again. Example:

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Exemplo</title>

    <style type="text/css">
    ...
    </style>

    <script>
    // Define cookie
    function setCookie(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (encodeURIComponent(value) || "")  + expires + "; path=/";
    };

    // Obtêm cookie
    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)===' '){ c = c.substring(1,c.length); }
            if (c.indexOf(nameEQ) === 0){ return decodeURIComponent(c.substring(nameEQ.length,c.length)); }
        }
        return null;
    };

    // Apaga cookie
    function eraseCookie(name) {
        document.cookie = name+'=; Max-Age=-99999999;'; 
    };

    // Exibe div uma única vez
    function cspCheck(){

        // Obtêmos a div #custom-social-proof
        var csp = document.getElementById('custom-social-proof')

        // Escondemos a div #custom-social-proof ao chamar a função cspCheck()
        csp.style.display = "none";

        // Se tiver um cookie definido / se a div já foi exibida uma vez
        if(getCookie('csp')){

            // Escondemos a div
            csp.style.display = "none";

        // Se NÃO tiver um cookie definido / se a div nunca foi exibida
        } else {

            // Exibimos a div
            csp.style.display = "block";

            // Definimos um prazo em dias para o cookie ser deletado (para div voltar à aparecer)
            var cookiesExpireIn = 1; // dia(s)

            // Definimos o cookie indicando que a div já foi exibida uma vez
            setCookie('csp','1',cookiesExpireIn);

        }

    }

    // Chamamos a função ao carregar a página
    window.onload = function() {
        cspCheck();
    };
    </script>

</head>

<body>
    <div class="custom-social-proof" id="custom-social-proof">
     ...
    </div>
</body>

</html>