How to make modal appear only once according to check?

Question

I would like to achieve the following:

• When loading the home page, display the modal box
• Inside the modal box, display a form with a single mandatory checkbox
• When checking the checkbox, click send and close the modal box, go to the home page
• Remember this check box selection preference using a cookie
• When users return to the home page, if they check the box, the modal box will not be displayed

I’ve already made the modal with the form but I don’t know how to manipulate the cookie to get the result of the click on check

Modal call:

var openModal = document.getElementById('open-modal');
var modal = document.getElementById('modal-1');
var closeModal = document.getElementsByClassName('close-modal')[0];

openModal.addEventListener('click', function(){
    modal.classList.toggle('visible');
});

closeModal.addEventListener('click', function(){
    modal.classList.remove('visible');
});

HTML from modal:

<button id="open-modal" class="button alert triger-modal" data-triger="modal-1" style="display: none">Open Modal</button>
    <div class="modal-wrap visible" id="modal-1">
        <div class="modal-dialog">
      <div class="modal-container">
        <div class="modal-header">
          <h2 class="modal-title">Tutorial de Primeiro Acesso!</h2>
          <button class="close-modal">&times;</button>
        </div>
        <div class="modal-content">
          <img src="../../repo/files/:public:KnowSolutionsDashboard:Embed:tutorial.gif" style="display:block;margin:auto;" alt="Tutorial de Primeiro Acesso" /><br/>

          <label style="position:relative;z-index:99999;"><input type="checkbox" name="mensagem" id="tutorial" value="1" >Não mostrar essa mensagem novamente</label> <br>


        </div>

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

Answer 1

You can use localStorage for this task:

checkbox.onclick = function(){
    if(!this.checked) localStorage.mostrarModal = false;
}

And in the function that runs automatically for modal opening, case localStorage.mostrarModal === 'false', prevents the execution of the rest of the function, using a Return:

window.addEventListener('onload', function(){

    if(localStorage.mostrarModal === false) return;

    exibeModal();

});

As you can see, exibeModal will never be executed.