Stockage local dans Angular 2

Question

Je dois stocker des données dans la session du navigateur et les récupérer jusqu'à ce que la session se termine. Comment utilisez-vous le stockage local et de session dans Angular 2 ?

Answer 1

La norme localStorage API devrait être disponible, il suffit de faire par exemple :

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

C'est assez largement soutenu .

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

Answer 2

Comment stocker, récupérer et supprimer des données de localStorage :

// General syntax for storing data
localStorage.setItem('key', 'value');
// Also note that both the key & the value has to be strings. 
// So we stringify the value(if it's an object) before setting it.

// So, if you have an object as a value that you want to save, stringify it like this
localStorage.setItem('some-key', JSON.stringify(itemData));

// OR for individual key-value pairs
localStorage.setItem('some-key', JSON.stringify({ token: token, name: name }));

// To retrieve data from localstorage
const myData = JSON.parse(localStorage.getItem('some-key'));

// To remove a value/item from localStorage
localStorage.removeItem("some-key");

Un conseil rapide :
Vous vous pouvez également utiliser un paquet pour votre application angulaire qui est basé sur native localStorage API (que nous utilisons ci-dessus) pour y parvenir et vous n'avez pas à vous soucier de stringify et parse. Consultez ce pour angular 5 et plus. @ngx-pwa/local-storage

Vous pouvez également effectuer une recherche rapide sur Google, angulaire locale stockage et trouver un paquet qui a encore plus d'étoiles Github, etc.

Regarde ça page pour en savoir plus sur l'API de stockage Web.

Answer 3

Sauvegarder dans LocalStorage :

localStorage.setItem('key', value);

Pour les objets avec des 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 enregistrera les données sous forme de chaîne et les récupérera sous forme de chaîne. . Vous devez analyser la sortie souhaitée si la valeur 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 le framework, plutôt que la bibliothèque tierce localStorageService ou toute autre bibliothèque, car cela réduit la taille de votre projet.

Answer 4

Voici un exemple d'un service simple, qui utilise localStorage pour faire persister les 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, fournissez-les dans un module de votre application, comme d'habitude, par exemple dans le module principal. Puis utilisez-le 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');
  }
}

Answer 5

Utilisez Angular2 @LocalStorage qui est décrit comme suit :

Ce petit décorateur Angular2/typescript permet de sauvegarder et de restaurer automatiquement l'état d'une variable dans votre directive (classe). et de restaurer automatiquement l'état d'une variable dans votre directive (classe ) en utilisant le LocalStorage de HTML5.

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