Modal does not appear after clicking the checkbox

Question

Good morning.

I am working on a system made in Angular 8, where, when we enter the home, a welcome modal appears. For now, this modal keeps popping up every time we come home.

I would like this modal to appear only the first time the user enters the system. From the second time, do not show again.

This is the HTML I have

    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="open-modal">
                    <p class="m-0"> Bem-vindo (a) </p>
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-0">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-8 p-4 text-justify" id="textWelcome">
                        </div>
                        <div class="col-md-4 p-4 pt-4 pb-4" style="background-color: #f8f9fc;">
                            <div class="logo-text align-self-center pt-4">
                                <span class="spanLogo-bemvindo">
                                    <h1 style="letter-spacing: 0.1em;"><strong>Portal</strong></h1>
                                </span>
                                <p class="text-center small" style="margin-top: -17px; margin-bottom: 30px;">
                                    de Aprovações de Horas
                                </p>
                            </div>
                            <div class="row align-items-center">
                                <div class="col mx-auto text-center">
                                    <img class="img-responsive" src="./assets/img/logo.png" alt="Logo"
                                        width="140" height=auto>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="col-md-1">
                    <input class="form-check-inline" id="ckEuli" type="checkbox">
                </div>
                <div class="col-md-8 m-0 p-0 small">
                    LI E ESTOU CIENTE
                </div>
                <div class="col-md-3 d-flex flex-row-reverse">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>
</div>

And that’s my Component.ts

import { Component, HostListener } from '@angular/core';
import { Parametrization } from './model/parametrization.model';
import { environment } from 'src/environments/environment';
import { Chart } from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';

declare const $:any;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    title = 'app';

    paramWelcome: Parametrization = new Parametrization();

    constructor() { }

    ngOnInit() {

        Chart.plugins.register(ChartDataLabels);

        $(document).ready(function () {
            $("#open-modal").modal();
        });

        this.api.get(environment.apiUrl, 'Parameterization/BEMVINDO').subscribe(
            (parametrization: Parametrization[]) => {
                document.getElementById('textWelcome').innerHTML = parametrization[0].description;
            }
        );
    }
//resto
}

How can I store the modal in the cache / localstorage / sessionstorage so it doesn’t appear the next time users access the system?

Answer 1

I was able to solve this by keeping with sessionstorage.

 $(document).ready(function () {
      var exibirModal = true;

      // Verifica se o navegador possui suporte a Storage.
      // E verifica na variável de sessão se a modal já foi aberta.
      if (typeof (Storage) !== 'undefined' && sessionStorage.getItem('modalExibida') == 'true') {
        exibirModal = false;
      } else {
        exibirModal = true;
      }

      if (exibirModal) {
        $('#open-modal').modal('show');

        if (typeof (Storage) !== 'undefined') {
          sessionStorage.setItem('modalExibida', 'true');
        }
      }
    });

I got this answer as reference in another post, here at stackoverflow Show or Hide modal with sessionStorage