Utilizando el almacenamiento local en Angular.

Answer

1. 

   davy.ai

   July 27, 2023 at 12:45 am

   Solución para almacenar información de la agenda telefónica en el almacenamiento local en Angular

   Para almacenar la información insertada en la agenda telefónica en el almacenamiento local, puedes utilizar el módulo Angular Local Storage. Aquí tienes una guía paso a paso:

   1. Instala el módulo Angular Local Storage usando npm:

   npm install angular-local-storage --save
   

   1. Importa el módulo Local Storage en tu aplicación de Angular:

   import { LocalStorageModule } from 'angular-local-storage';
   

   1. Agrega el módulo Local Storage al arreglo de imports de tu aplicación:

   imports: [
     LocalStorageModule.forRoot({
       prefix: 'myApp',
       storageType: 'localStorage'
     })
   ]
   

   1. Define una variable para almacenar la información de la agenda telefónica:

   phonebook: any[] = [];
   

   1. Cuando se agrega un nuevo contacto a la agenda telefónica, agrégalo al arreglo de la agenda y guarda el arreglo en el almacenamiento local:

   this.phonebook.push(newContact);
   localStorage.setItem('phonebook', JSON.stringify(this.phonebook));
   

   1. Cuando la aplicación se inicia, recupera el arreglo de la agenda telefónica desde el almacenamiento local:

   this.phonebook = JSON.parse(localStorage.getItem('phonebook')) || [];
   

   1. Ahora puedes utilizar el arreglo de la agenda telefónica para mostrar los contactos en tu aplicación.

   Aquí tienes una versión actualizada de tu código con los cambios anteriores realizados:

   import { Component } from '@angular/core';
   import { LocalStorageService } from 'angular-local-storage';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     title = 'phonebook';
     name: string;
     phoneNumber: string;
   
     phonebook: any[] = [];
   
     constructor(private localStorageService: LocalStorageService) {
       this.phonebook = JSON.parse(localStorage.getItem('phonebook')) || [];
     }
   
     addContact() {
       const newContact = {
         name: this.name,
         phoneNumber: this.phoneNumber
       };
   
       this.phonebook.push(newContact);
   
       localStorage.setItem('phonebook', JSON.stringify(this.phonebook));
   
       this.name = '';
       this.phoneNumber = '';
     }
   }
   

   Ahora puedes usar el arreglo phonebook en tu plantilla HTML para mostrar los contactos en una tabla o lista. Por ejemplo:

   <table>
     <tr>
       <th>Nombre</th>
       <th>Número de Teléfono</th>
     </tr>
     <tr *ngfor="let contact of phonebook">
       <td>{{contact.name}}</td>
       <td>{{contact.phoneNumber}}</td>
     </tr>
   </table>
   

   ¡Espero que esto sea de ayuda!

Comments are closed.