0

quisiera saber cómo hago para guardar los datos de un formulario en el local storage y luego para imprimir esos datos en la tabla

Esta es mi data

export class Data {
  constructor(
    public id: number,
    public nombres: string,
    public apellidoPaterno: string,
    public apellidoMaterno: string,
    public dni: number,
    public celular: number,
  ){ }
}

Estuve intentando hacer, es del archivo TS

loadList(){
    console.log('load');
    this.data = JSON.parse(this.userService.getStudents() || '{}');
    if (this.data !== null) {
      this.showStudents == true;
    }
    else {
      this.showStudents == false;
    }
  }

Y esto mi servicio

getStudents(){
  return localStorage.getItem('getStudents');
}
1
  • ¿Y qué problema tienes al guardarlos?
    – Lobos
    Commented el 19 jun. 2022 a las 16:14

1 respuesta 1

0

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?

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.