Bom dia.
Estou atuando num sistema feito em Angular 8, onde, quando entramos na home, aparece um modal de bem-vindo. Por enquanto, esse modal continua aparecendo sempre que voltamos para home.
Gostaria que essa modal aparecesse só na primeira vez que o usuário entrar no sistema. A partir da segunda vez, não mostrar novamente.
Esse é o HTML que eu tenho
<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">×</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>
E esse meu 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
}
Como eu posso guardar a modal no cache / localstorage / sessionstorage para não aparecer nas próximas vezes que os usuários acessarem o sistema?