Utilizando local storage, la información queda almacenada en el
navegador del usuario. persiste incluso cuando el navegador se cierre
y se reabra. Por eso hay que controlar su almacenamiento.
la interfaz Storage de la API de almacenamiento nos da acceso al
almacenamiento local o de sesión Mediante la propiedad localStorage
podemos acceder al objeto Storage
Para conocer el estado del almacenamiento local debemos llamar a
localstorage.length desde nuestro codigo La propiedad de sólo lectura
length de la interfaz Storage devuelve un entero que indica el numero
de elementos guardados en el objeto Storage.
Tambien en tu codigo estas comparado no asignado con this.showStudents == true
ngOnInit(): void {
console.log('local storage',localStorage);
// por defecto Storage {leng:0}
localStorage!==undefined ?console.log('not undefined'):console.log('undefined');
// por defecto muestra not undefined
localStorage!==null ?console.log('not null'):console.log('null');
// por defecto muestra not null
localStorage.length !=0 ?console.log('hay elementos guardados'):console.log('no hay elementos guardados');
// por defecto no hay elementos guardados usar esta
condicion()
}
condicion(){
console.log('condicion');
if (localStorage.length!= 0) {
this.condicion = true;
}
else {
this.condicion = false;
}
}
Lo mejor es comparar con la propiedad length del Objeto Storage
Para no implementar una API completo un formulario guardo los datos en local storage y los represento en una tabla se puede reducir aun mas la lógica pero no lo hago para hacer mas claro el codigo y
dejo al final los métodos a agregar a este código para vaciar el local
storage y actualizar la condicion
class Data {
constructor(
public id: number,
public nombres: string,
){ }
}
estudiantes:Array<Data>=new Array();
condicion=false;
public miFormulario:FormGroup;
constructor( private formBuilder: FormBuilder ,private fb:FormBuilder) {
this.miFormulario = this.fb.group({
id:[null,Validators.required],
nombres:['',Validators.required]
});
SubmitLocal(form:FormGroup){
localStorage.setItem('form-data', JSON.stringify(form.value));
}
resetForm(){
this.miFormulario.reset();
}
VerLocal(){
this.condicion=true;
let formValue = JSON.parse(localStorage.getItem('form-data')!);
this.estudiantes=[...this.estudiantes,formValue];
console.log('formValue:',formValue);
this.resetForm()
}
// html
<form [formGroup]="miFormulario" >
id:
<input type="text" formControlName="id"><br>
<hr>
nombres:
<input type="text" formControlName="nombres"><br>
<hr>
<button type="submit" (click)="SubmitLocal(miFormulario)">Submit</button>
</form>
<br>
<button (click)="VerLocal()">VerLocal</button>
<br>
<table>
<thead>
<tr>
<th scope="col" *ngFor="let titulo of titulos">
{{titulo}}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let estudiante of estudiantes">
<td> {{estudiante.id}}</td>
<td> {{estudiante.nombres}}</td>
</tr>
</tbody>
</table>
<div *ngIf="condicion; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>{{ estudiantes| json }}</ng-template>
<ng-template #elseBlock>No hay Datos en local storage.</ng-template>
Para quitar los datos del local storage usar
localStorage.clear();
Podemos hacerlo implementando el siguiente método dentro del codigo anterior
condicion(){
console.log('condicion');
if (localStorage.length!= 0) {
this.condicion = true;
}
else {
this.condicion = false;
}
}
limpiarLocalStorage(){
localStorage.clear();
this.condicion()
}
Así la condición implementada en la vista responderá siempre
adecuadamente a nuestro requerimiento
Tenes alguna dificultad adicional por la cual mi respuesta no te es de
utilidad?