web-dev-qa-db-fra.com

Stockage local dans Angular 2

J'ai besoin de stocker des données dans la session du navigateur et de les récupérer jusqu'à la fermeture de la session. Comment utilisez-vous le stockage local et de session dans Angular 2?

javascriptangularlocal-storagesession-variables
127
Jaya Kumar B A

Le standard localStorage API devrait être disponible, il suffit de le faire, par exemple:

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

C'est assez largement supporté .

Notez que vous devrez ajouter "dom" au tableau "lib" de votre tsconfig.json si vous ne l'avez pas déjà.

128
jonrsharpe

Pour stocker des données dans le stockage local,

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

Assurez-vous de définir une valeur, par exemple si vous avez un objet.
localStorage.setItem(itemName, JSON.stringify(itemData));

OU pour des paires clé-valeur individuelles
localStorage.setItem('currentUser', JSON.stringify({ token: token, name: name }));

Et pour récupérer des données du stockage local
user = JSON.parse(localStorage.getItem(currentUser));

edit: Vous pouvez également utiliser un package basé sur l’API native localStoreage (que nous utilisons ci-dessus) pour y parvenir, sans avoir à vous soucier de stringify ni de l’analyse. Commander ce paquet pour angular 5 et plus. @ ngx-pwa/local-storage

74
Junaid

Enregistrer dans LocalStorage:

localStorage.setItem('key', value);

Pour les objets avec propriétés:

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

Obtenir du stockage local:

localStorage.getItem('key');

Pour les objets:

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

l'objet localStorage enregistre les données sous forme de chaîne et les récupère sous forme de chaîne. Vous devez analyser la sortie souhaitée si value est un objet stocké sous forme de chaîne. par exemple. parseInt(localStorage.getItem('key'));

Il est préférable d'utiliser localStroage fourni par l'infrastructure plutôt que la bibliothèque tierce locale localStorageService ou toute autre solution, car cela réduit la taille de votre projet.

33
Nabin Kumar Khatiwada

Utilisez le module Angular2 @LocalStorage , décrit comme suit:

Ce petit décorateur Angular2/TypeScript facilite très facilement l'enregistrement et la restauration automatique d'un état variable dans votre directive (propriété de classe) à l'aide de HTML5 'LocalStorage.

Si vous devez utiliser des cookies, vous devriez jeter un coup d'oeil à: https://www.npmjs.com/package/angular2-cookie

15
ebu_sho

Voici un exemple de service simple, qui utilise localStorage pour conserver des données:

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;
    }
  }
}

Pour utiliser ces services, indiquez-le dans certains modules de votre application comme d'habitude, par exemple dans le module principal. Alors utilisez comme ceci:

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');
  }
}
15
Hinrich

Ensemble de stockage local

Syntaxe:

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

Exemple:

  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...
    }
  }

aussi vous pouvez utiliser

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

Session Set Set Item

Syntaxe:

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

Exemple:

  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...
    }
  }

aussi vous pouvez utiliser

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

Stocker et récupérer des données facilement

9
Karnan Muthukumar

Vous pouvez également envisager d'utiliser la bibliothèque maintenue par moi: ngx-store (npm i ngx-store)

Il est extrêmement facile de travailler avec localStorage, sessionStorage et les cookies. Il existe quelques méthodes prises en charge pour manipuler les données:

1) Décorateur: 

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 
  }
}

Les variables stockées par les décorateurs peuvent également être partagées entre différentes classes. Il existe également @TempStorage() (avec un alias de @SharedStorage())) décorateur conçu à cet effet.

2) Méthodes de service 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) Modèle de générateur: 

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);
    }
}

Une autre chose importante est que vous pouvez écouter toutes les modifications de stockage, par exemple. (le code ci-dessous utilise la syntaxe 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() renvoie un observable normal, vous pouvez donc le compresser, le filtrer, le renvoyer, etc.

Je suis toujours ouvert aux suggestions et questions qui m'aident à améliorer cette bibliothèque et sa documentation.

8
Daniel Kucal

Comme dit ci-dessus, devrait être: localStorageService.set('key', 'value'); et localStorageService.get('key');

7
user2521059

Nous pouvons facilement utiliser le stockage local pour définir les données et les recevoir.

Note: cela fonctionne avec angular2 et 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;
6
Rahul Mangal

La syntaxe de set item est

localStorage.setItem(key,value);

La syntaxe de get item est la suivante:

localStorage.getItem(key);

Un exemple de ceci est:

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

Les décorateurs sont une solution vraiment élégante. Vous pouvez les utiliser pour marquer les variables que vous souhaitez stocker.

export class SomeComponent {

  @LocalStorage
  public variableToBeStored: string;

}

Exemple: comment l'obtenir se trouve dans cet article (mon blog)

3
Filip Molcik

Pour définir l'élément ou l'objet dans le stockage local:

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

Pour que l'élément ou l'objet soit stocké localement, vous devez vous souvenir de votre clé.

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

Pour le retirer de la mémoire de stockage locale:

   localStorage.removeItem('yourKey');
2
Sopyan Mulyana

Installez "angular-2-local-storage"

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

Vous pouvez utiliser le service LocalStorage Asynchrone Angular 2+ de cyrilletuzi .

Installer:

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

Usage:

// 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');

Plus d'infos ici:

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

2
JavierFuentes

Vous pouvez utiliser le service suivant pour travailler sur localStorage et sessionStorage dans votre projet angular. injecter ce service dans vos composants, services et ...

N'oubliez pas d'enregistrer le service dans votre module principal.

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

@Injectable()
export class BrowserStorageService {

  getSession(key: string): any {
    const data = window.sessionStorage.getItem(key);
    if (data) {
      return JSON.parse(data);
    } else {
      return null;
    }
  }

  setSession(key: string, value: any): void {
    const data = value === undefined ? '' : JSON.stringify(value);
    window.sessionStorage.setItem(key, data);
  }

  removeSession(key: string): void {
    window.sessionStorage.removeItem(key);
  }

  removeAllSessions(): void {
    for (const key in window.sessionStorage) {
      if (window.sessionStorage.hasOwnProperty(key)) {
        this.removeSession(key);
      }
    }
  }

  getLocal(key: string): any {
    const data = window.localStorage.getItem(key);
    if (data) {
      return JSON.parse(data);
    } else {
      return null;
    }
  }

  setLocal(key: string, value: any): void {
    const data = value === undefined ? '' : JSON.stringify(value);
    window.localStorage.setItem(key, data);
  }

  removeLocal(key: string): void {
    window.localStorage.removeItem(key);
  }

  removeAllLocals(): void {
    for (const key in window.localStorage) {
      if (window.localStorage.hasOwnProperty(key)) {
        this.removeLocal(key);
      }
    }
  }
}
0
AbolfazlR

installer

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

tout d'abord vous devez installer "angular-2-local-storage"

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

Enregistrer dans LocalStorage:

localStorage.setItem('key', value);

Obtenir du stockage local:

localStorage.getItem('key');
0
Dimuthu