javascript - change - page title angular 4

Almacenamiento local en Angular 2

Question

Necesito almacenar datos en la sesión del navegador y recuperarlos hasta que finalice la sesión. ¿Cómo se usa el almacenamiento local y de sesión en Angular 2?

Answer 1

Aquí hay un ejemplo de un servicio simple que usa localStorage para conservar los datos:

import { Injectable } from ''@angular/core'';

@Injectable()
export class PersistanceService {
  constructor() {}

  set(key: string, data: any): void {
    try {
      localStorage.setItem(key, JSON.stringify(data));
    } catch (e) {
      console.error(''Error saving to localStorage'', e);
    }
  }

  get(key: string) {
    try {
      return JSON.parse(localStorage.getItem(key));
    } catch (e) {
      console.error(''Error getting data from localStorage'', e);
      return null;
    }
  }
}

Para usar estos servicios, bríndelo en algún módulo de su aplicación de manera normal, por ejemplo, en el módulo central. Luego use así:

import { Injectable } from ''@angular/core'';

@Injectable()
export class SomeOtherService {

  constructor(private persister: PersistanceService) {}

  someMethod() {
    const myData = {foo: ''bar''};
    persister.set(''SOME_KEY'', myData);
  }

  someOtherMethod() {
    const myData = persister.get(''SOME_KEY'');
  }
}

Answer 2

Artículo de conjunto de almacenamiento local

Sintaxis:

  localStorage.setItem(key,value);
  localStorage.getItem(key);

Ejemplo:

  localStorage.setItem("name","Muthu");
  if(localStorage){   //it checks browser support local storage or not
    let Name=localStorage.getItem("name");
    if(Name!=null){  //  it checks values here or not to the variable
       //do some stuff here...
    }
  }

también puedes usar

    localStorage.setItem("name", JSON.stringify("Muthu"));

Elemento de conjunto de almacenamiento de sesión

Sintaxis:

  sessionStorage.setItem(key,value);
  sessionStorage.getItem(key);

Ejemplo:

  sessionStorage.setItem("name","Muthu");

  if(sessionStorage){ //it checks browser support session storage/not
    let Name=sessionStorage.getItem("name");

    if(Name!=null){  //  it checks values here or not to the variable
       //do some stuff here...
    }
  }

también puedes usar

   sessionStorage.setItem("name", JSON.stringify("Muthu"));

Almacene y recupere datos fácilmente

Answer 3

Como se dijo anteriormente, debe ser: localStorageService.set(''key'', ''value''); y localStorageService.get(''key'');

Answer 4

Instalar "angular-2-local-storage"

import { LocalStorageService } from ''angular-2-local-storage'';

Answer 5

La API localStorage estándar debería estar disponible, solo haga, por ejemplo:

localStorage.setItem(''whatever'', ''something'');

Es bastante ampliamente compatible .

Tenga en cuenta que deberá agregar "dom" a la matriz "lib" en su tsconfig.json si aún no lo tiene.

Answer 6

La sintaxis del elemento establecido es

localStorage.setItem(key,value);

La sintaxis de get item es

localStorage.getItem(key); 

Un ejemplo de esto es:

localStorage.setItem(''email'',''[email protected]'');
    let mail = localStorage.getItem("email");
    if(mail){ 
       console.log(''your email id is'', mail);
    }
  }

Answer 7

La solución realmente elegante son los decoradores. Puede usarlos para marcar las variables que desea almacenar.

export class SomeComponent {

  @LocalStorage
  public variableToBeStored: string;

}

Ejemplo de cómo lograrlo está en este artículo (mi blog)

Answer 8

Para almacenar datos en el almacenamiento local,

localStorage.setItem(''key'', ''value'');

Asegúrese de stringificar el valor, por ejemplo, si tiene un objeto
localStorage.setItem(itemName, JSON.stringify(itemData));

O para pares clave-valor individuales
localStorage.setItem(''currentUser'', JSON.stringify({ token: token, name: name }));

Y para recuperar datos del almacenamiento local
user = JSON.parse(localStorage.getItem(currentUser));

editar: También puede usar un paquete que se base en la API nativa localStoreage (que estamos usando anteriormente) para lograr esto y no tiene que preocuparse por stringify y análisis. Verifique este paquete para angular 5 y superior. @ngx-pwa/local-storage

Answer 9

Para establecer el elemento u objeto en el almacenamiento local:

   localStorage.setItem(''yourKey'', ''yourValue'');

Para obtener el artículo u objeto en el almacenamiento local, debe recordar su clave.

   let yourVariable = localStorage.getItem(''yourKey'');

Para eliminarlo del almacenamiento local:

   localStorage.removeItem(''yourKey'');

Answer 10

Podemos usar fácilmente localStorage para configurar los datos y recibirlos.

Nota: funciona tanto con angular2 como con angular 4

//set the data
localStorage.setItem(key, value);   //syntax example
localStorage.setItem(''tokenKey'', response.json().token);

//get the data
localStorage.getItem(''tokenKey'')

//confirm if token is exist or not
return localStorage.getItem(''tokenKey'') != null;

Answer 11

Puede usar el servicio LocalStorage Asynchronous Angular 2+ de cyrilletuzi .

Instalar:

$ npm install --save @ngx-pwa/local-storage

Uso:

// your.service.ts
import { LocalStorage } from ''@ngx-pwa/local-storage'';

@Injectable()
export class YourService {
   constructor(private localStorage: LocalStorage) { }
}

// Syntax
this.localStorage
    .setItem(''user'', { firstName:''Henri'', lastName:''Bergson'' })
    .subscribe( () => {} );

this.localStorage
    .getItem<User>(''user'')
    .subscribe( (user) => { alert(user.firstName); /*should be ''Henri''*/ } );

this.localStorage
    .removeItem(''user'')
    .subscribe( () => {} );

// Simplified syntax
this.localStorage.setItemSubscribe(''user'', { firstName:''Henri'', lastName:''Bergson'' });
this.localStorage.removeItemSubscribe(''user'');

Más información aquí:

@ngx-pwa/local-storage
https://github.com/cyrilletuzi/angular-async-local-storage

Answer 12

También puede considerar el uso de la biblioteca mantenida por mí: ngx-store ( npm i ngx-store )

Hace que trabajar con localStorage, sessionStorage y cookies sea increíblemente fácil. Existen algunos métodos compatibles para manipular los datos:

1) decorador:

export class SomeComponent {
  @LocalStorage() items: Array<string> = [];

  addItem(item: string) {
    this.items.push(item);
    console.log(''current items:'', this.items);
    // and that''s all: parsing and saving is made by the lib in the background 
  }
}

Las variables almacenadas por los decoradores también se pueden compartir entre diferentes clases: también hay un @TempStorage() (con un alias de @SharedStorage() )) diseñado para ello.

2) Métodos de servicio simples:

export class SomeComponent {
  constructor(localStorageService: LocalStorageService) {}

  public saveSettings(settings: SettingsInterface) {
    this.localStorageService.set(''settings'', settings);
  }

  public clearStorage() {
    this.localStorageService.utility
      .forEach((value, key) => console.log(''clearing '', key));
    this.localStorageService.clear();
  }
}

3) Patrón de constructor:

interface ModuleSettings {
    viewType?: string;
    notificationsCount: number;
    displayName: string;
}

class ModuleService {
    constructor(public localStorageService: LocalStorageService) {}

    public get settings(): NgxResource<ModuleSettings> {
        return this.localStorageService
            .load(`userSettings`)
            .setPath(`modules`)
            .setDefaultValue({}) // we have to set {} as default value, because numeric `moduleId` would create an array 
            .appendPath(this.moduleId)
            .setDefaultValue({});
    }

    public saveModuleSettings(settings: ModuleSettings) {
        this.settings.save(settings);
    }

    public updateModuleSettings(settings: Partial<ModuleSettings>) {
        this.settings.update(settings);
    }
}

Otra cosa importante es que puede escuchar (todos) los cambios de almacenamiento, por ejemplo (el siguiente código usa la sintaxis RxJS v5):

this.localStorageService.observe()
  .filter(event => !event.isInternal)
  .subscribe((event) => {
    // events here are equal like would be in:
    // window.addEventListener(''storage'', (event) => {});
    // excluding sessionStorage events
    // and event.type will be set to ''localStorage'' (instead of ''storage'')
  });

WebStorageService.observe() devuelve un Observable regular, para que pueda comprimirlos, filtrarlos, hacerlos rebotar, etc.

Siempre estoy abierto a escuchar sugerencias y preguntas que me ayuden a mejorar esta biblioteca y su documentación.

Answer 13

Utilice el módulo Angular2 @LocalStorage , que se describe como:

Este pequeño decorador Angular2 / mecanografiado hace que sea muy fácil guardar y restaurar automáticamente un estado variable en su directiva (propiedad de clase) usando HTML5 ''LocalStorage.

Si necesita utilizar cookies, debe consultar: https://www.npmjs.com/package/angular2-cookie

Answer 14

instalar

npm install --save @ngx-pwa/local-storage

antes que nada necesitas instalar "angular-2-local-storage"

import { LocalStorageService } from ''angular-2-local-storage'';

Guardar en LocalStorage:

localStorage.setItem(''key'', value);

Obtener del almacenamiento local:

localStorage.getItem(''key'');

Answer 15

Guardar en LocalStorage:

localStorage.setItem(''key'', value);

Para objetos con propiedades:

localStorage.setItem(''key'', JSON.stringify(object));

Obtener del almacenamiento local:

localStorage.getItem(''key'');

Para objetos:

JSON.parse(localStorage.getItem(''key''));

LocalStorage Object guardará los datos como una cadena y los recuperará como una cadena . Debe analizar la salida deseada si el valor es un objeto almacenado como cadena. por ejemplo, parseInt(localStorage.getItem(''key''));

Es mejor usar el marco proporcionado localStroage en lugar de la biblioteca de terceros localStorageService o cualquier otra cosa porque reduce el tamaño de su proyecto.