Post Top Ad

Your Ad Spot

domingo, 28 de junio de 2020

Datos persistentes utilizando almacenamiento local y angular

Introducción

El almacenamiento local y el almacenamiento de sesión forman parte del denominado almacenamiento web . Ambos nos dan la posibilidad de almacenar datos de valor clave en el lado del cliente. Los datos almacenados en el almacenamiento local se eliminan solo cuando el usuario borra su caché o decidimos borrar el almacenamiento. El almacenamiento de sesión menos utilizado se borra inmediatamente cuando se cierra la pestaña del navegador web. Como un almacenamiento más utilizado, exploraremos el almacenamiento local, sus funcionalidades y cómo usarlo en el contexto de Angular.

Casos de uso

Puede estar pensando ahora, ¿cuándo podríamos aprovechar este almacenamiento y por qué lo necesitamos? ¿Por qué no solo usamos una base de datos como PostgreSQL? Hay muchos casos de uso, pero veremos dos de ellos ahora.
  • Swagger: es una herramienta muy utilizada para definir API REST. Si no está familiarizado con él, visite su sitio web: https://swagger.io/ . Una de sus funcionalidades es Swagger Editor https://editor.swagger.io/Permitiéndonos definir APIs y ver de inmediato el resultado de nuestra definición, el editor swagger es un muy buen ejemplo de cómo aprovechar el almacenamiento local. Cada vez que el usuario edita la definición, persiste automáticamente. De esta manera, incluso después de cerrar la pestaña y volver más tarde (evento unos meses), podrá ver sus cambios allí. Puede ver los datos persistentes abriendo las Herramientas para webmasters (F12 para Windows), vaya a Aplicación y luego - Almacenamiento local. Intente cambiar la definición y verá sus cambios almacenados inmediatamente allí. Tenga en cuenta que si borra la memoria caché del navegador, se perderán los datos persistentes.
  • Otro buen ejemplo de uso de almacenamiento local es cuando desea reducir la cantidad de llamadas HTTP para un dato que a menudo no cambia. Compruebe si tiene los datos deseados en el almacenamiento; si están allí, simplemente utilícelos. De lo contrario, haga la llamada, recójala y persista. La próxima vez, puede usarlo desde el almacenamiento local en lugar de hacer una llamada más.
Pseudocódigo:
  1. dejar datos = localStorage. get ( 'userData' ) ;
  2. if ( datos ) {
  3. devolver datos;
  4. } más {
  5. fetchData ( ) ;
  6. }
Ahora, cuando estamos familiarizados con algunos de los casos de uso, veamos cómo podríamos usar el almacenamiento local en Angular.

Contexto angular

No me malinterpreten, no hay nada angular específico en el uso del almacenamiento local. Todo lo que implementaremos se puede reutilizar en otros marcos o incluso en JavaScript vainilla. Sin embargo, debido a las cosas que pueden salir mal, como:
  • el navegador no admite almacenamiento local
  • pasar el objeto dará como resultado el valor [objeto Objeto], en lugar del objeto real
Es una buena idea crear un servicio, que se utilizará como un canal de comunicación entre nuestra aplicación y el almacenamiento del navegador. Solo nos ocuparemos de la compatibilidad del navegador y la cadena allí.
Comenzaremos con lo básico, creemos un nuevo proyecto usando la CLI Angular
  1. ng nuevo almacenamiento local angular
Crear un servicio usando
  1. ng g servicio de almacenamiento local
Nuestro servicio será simple, pero puede ampliarse más adelante si se necesitan más funcionalidades. Aquí está el código para ello (local-storage.service.ts)
  1. importar { Inyectable } desde '@ angular / core' ;
  2. @ Inyectable ( {
  3. provideIn: 'root'
  4. } )
  5. clase de exportación LocalStorageService {
  6. localStorage: Almacenamiento;
  7. constructor ( ) {
  8. this.localStorage = window.localStorage;
  9. }
  10. get ( key: string ) : any {
  11. if ( this.isLocalStorageSupported ) {
  12. devuelve JSON. parse ( this.localStorage. getItem ( key ) ) ;
  13. }
  14. volver nulo;
  15. }
  16. set ( clave: cadena, valor: cualquiera ) : booleano {
  17. if ( this.isLocalStorageSupported ) {
  18. this.localStorage. setItem ( clave, JSON. stringify ( valor ) ) ;
  19. volver verdadero;
  20. }
  21. falso retorno;
  22. }
  23. eliminar ( clave: cadena ) : booleano {
  24. if ( this.isLocalStorageSupported ) {
  25. this.localStorage. removeItem ( clave ) ;
  26. volver verdadero;
  27. }
  28. falso retorno;
  29. }
  30. get isLocalStorageSupported ( ) : boolean {
  31. volver !! this.localStorage
  32. }
  33. }
Uno a uno. Como puede ver, tenemos una nueva propiedad de clase: localStorage, que mantendrá la referencia al almacenamiento local. En lugar de acceder a él usando window.localStorage, usaremos this.localStorage en nuestros métodos. Verifique el constructor del servicio: aquí es donde obtenemos la referencia.
También he creado un 'getter': get isLocalStorageSupported (), que usaremos para verificar si el almacenamiento local es compatible con el navegador. Como ya sabemos, aunque es ampliamente compatible, algunas de las versiones anteriores del navegador (por ejemplo, IE7) no son compatibles con el almacenamiento web. Puede verificarlo usted mismo utilizando el popular caniuse: https://caniuse.com/#search=localstorage
Ahora, la funcionalidad principal: establecer, eliminar, obtener. Lo común entre estos métodos es que todos primero verifican si se admite localStorage. Esto es muy importante, de lo contrario, intentaremos modificar el almacenamiento sin que sea compatible y, por supuesto, se generarán errores, es decir, se romperán las funcionalidades.
Los métodos set y get también están haciendo un paso adicional: análisis y stringify. Como ya se mencionó, esto solucionará un comportamiento inesperado al establecer valores de objetos y recuperarlos.
Y, por último, tenga en cuenta que establece y elimina el tipo booleano de retorno. Es una buena idea ya que siempre sabremos si los métodos se ejecutan con éxito. Si por alguna razón, no (actualmente solo es compatible con el navegador), estaremos conscientes de esto.
Como nuestro servicio básico de almacenamiento local está en su lugar, probémoslo. Vaya a app.component.ts e inyéctelo.
  1. constructor ( privado localStorageService: LocalStorageService ) { }
Luego, cree un método público llamado persistir (o algo más, depende de usted).
  1. persistir ( clave: cadena, valor: cualquiera ) {
  2. this.localStorageService. conjunto ( clave, valor ) ;
  3. }
Ajuste también app.component.html, elimine todo y agregue esto.
  1. <input type = "text" ( input ) = "persistir ('prueba', $ event.target.value)" >
Es un campo de entrada simple que llamará al método de persistencia cuando alguien cambie el valor. Inicie la aplicación y pruebe. Escriba alguna vez y compruebe si persiste (ya sabe cómo).
Tadaaa ... nuestro servicio está funcionando! Felicidades!

Prima

Extendamos un poco el servicio. Lo que queremos lograr es poder suscribirnos a los cambios y reaccionar ante ellos desde otros lugares de nuestra aplicación. Lo conseguiremos utilizando el Sujeto, un tipo especial de Observable que es Observable y Observador al mismo tiempo.
  1. importar { Inyectable } desde '@ angular / core' ;
  2. importar { Asunto } desde 'rxjs' ;
  3. @ Inyectable ( {
  4. provideIn: 'root'
  5. } )
  6. clase de exportación LocalStorageService {
  7. localStorage: Almacenamiento;
  8. cambia $ = nuevo Asunto ( ) ;
  9. constructor ( ) {
  10. this.localStorage = window.localStorage;
  11. }
  12. get ( key: string ) : any {
  13. if ( this.isLocalStorageSupported ) {
  14. devuelve JSON. parse ( this.localStorage. getItem ( key ) ) ;
  15. }
  16. volver nulo;
  17. }
  18. set ( clave: cadena, valor: cualquiera ) : booleano {
  19. if ( this.isLocalStorageSupported ) {
  20. this.localStorage. setItem ( clave, JSON. stringify ( valor ) ) ;
  21. this.changes $. siguiente ( {
  22. tipo: 'conjunto' ,
  23. llave,
  24. valor
  25. } ) ;
  26. volver verdadero;
  27. }
  28. falso retorno;
  29. }
  30. eliminar ( clave: cadena ) : booleano {
  31. if ( this.isLocalStorageSupported ) {
  32. this.localStorage. removeItem ( clave ) ;
  33. this.changes $. siguiente ( {
  34. tipo: 'eliminar' ,
  35. llave
  36. } ) ;
  37. volver verdadero;
  38. }
  39. falso retorno;
  40. }
  41. get isLocalStorageSupported ( ) : boolean {
  42. volver !! this.localStorage
  43. }
  44. }
Este es el servicio ajustado. Lo único nuevo aquí es que el Asunto con el nombre "cambios $" emitirá tanto en acciones de conjunto como de eliminación (get no es necesario ya que no sucede nada nuevo con los datos). Emitiremos el tipo de acción, la clave que manipulará y, en caso de valor establecido, en caso de eliminación, nada.
Ahora, cada componente que tiene acceso y puede inyectar el servicio puede rastrear los cambios. Hagamos una prueba rápida. Accedí a app.component.ts y creé una propiedad que hará referencia a los cambios de almacenamiento local. Me gusta esto:
  1. importar { Componente } desde '@ angular / core' ;
  2. importar { LocalStorageService } desde './local-storage.service' ;
  3. @ Componente ( {
  4. selector: 'raíz de la aplicación' ,
  5. templateUrl: './app.component.html' ,
  6. styleUrls: [ './app.component.css' ]
  7. } )
  8. clase de exportación AppComponent {
  9. localStorageChanges $ = this.localStorageService.changes $;
  10. constructor ( privado localStorageService: LocalStorageService ) { }
  11. persistir ( clave: cadena, valor: cualquiera ) {
  12. this.localStorageService. conjunto ( clave, valor ) ;
  13. }
  14. }
Y renderizarlos en app.component.html
  1. <input type = "text" ( input ) = "persistir ('prueba', $ event.target.value)" >
  2. <div * ngIf = "localStorageChanges $ | asíncrono como localStorageChanges" >
  3. { { localStorageChanges.type } }
  4. { { localStorageChanges.key } }
  5. { { localStorageChanges.value } }
  6. </div>
Inicie la aplicación y comience a cambiar la entrada, verá los últimos cambios representados.
Puede encontrar la versión final en Github:
https://github.com/vikobg/first-class-js/tree/master/angular-local-storage

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas