-1
votes

Détecter les modifications de stockage locales et montrer à la page sans rechargement

J'ai un problème avec angulaire, ionique 4 localtsorage.Lorsque je sauvegarde des données sur localStorage d'une page et souhaitez afficher les données à une autre page, j'ai besoin de recharger la page pour le faire fonctionner. Je pensais à la vérification Pour les modifications locales de la page, je veux afficher les données.Vous savez comment puis-je détecter les modifications de localStorage dans l'angulaire 7, ionique 4?

angular ionic4 local-storage

1 commentaires

Avez-vous essayé développeur.mozilla.org/en-us / Docs / Web / API / web_storage_api / ...

4 Réponses :

3
votes

Je pense que vous devriez utiliser RXJS Stream pour y accomplir.

   private storageSub= new Subject<string>();
  ...

  watchStorage(): Observable<any> {
    return this.storageSub.asObservable();
  }

  setItem(key: string, data: any) {
    localStorage.setItem(key, data);
    this.storageSub.next('added');
  }

  removeItem(key) {
    localStorage.removeItem(key);
    this.storageSub.next('removed');
  }

9 commentaires

Je reçois cette erreur: l'argument de type '"modifié" n'est pas assignable au paramètre de type "Boolean" d'ici: this.storagesub.next ("modifié");

Ah Désolé, bien sûr que ce sera une erreur. Si le type est booléen, vous devez ensuite passer un vrai faux. C'est à vous de voir comment trouverez-vous cela plus approprié? Je pense que vous devriez simplement changer de sujet ();

Ça marche! J'ai fait comme vous l'avez dit dans mon DataService et j'appelle Watchstorage sur ma page d'accueil.in à la maison, je reçois les valeurs du stockage et les placer dans un tableau comme celui-ci :: this.storage.get (this.uid) .. (val) => {.....} dois-je le mettre à l'intérieur de cela pour travailler ?? :: this.dataservice.watchstorage (). S'inscrire (((Data: String) => {si (DATA == ' changé ') {this.storage.get (this.uid) .Chen ((val) => {.....}}}); ou je recharais la fenêtre si la déclaration si la déclaration est vraie?

Vous n'avez pas à recharger. Tu es sur le bon chemin. (this.dataserservice.watchstorage (). S'abonner (((String: String) => ...) S'abonner et regarder le flux et jouer en fonction des "données". Faites n'importe quoi si l'instruction est vraie. N'oubliez pas de upvote ou Marquez ceci comme votre réponse :)) Profitez de votre flux :)

Ofc .Merci beaucoup mate !!

Puis-je poser une dernière question.i essayé d'appeler cela.dataservice.watchstorage à partir de 2 pages.mais cela s'appelle seulement d'une personne que vous savez pourquoi cela se produit? @ADAPTTEWEB

Je ne sais pas si je comprends la question correctement. Vous avez isolé l'observable dans un service, je suppose. Avez-vous une erreur? Peut-il être que vous avez oublié de l'ajouter au module ou ne l'importait pas correctement à la deuxième page? Normalement, les services peuvent être utilisés dans plusieurs composants.

Donc.J'ai 3 onglets (home, profil, paramètres) et d'autres pages.Je inclure l'onglet observable dans la maison et le profil.Quand je fais une modification de localSorage de l'une de mes pages, cela fonctionne parfaitement sur la page d'accueil mais pas dans le profil Page. Mais voici le problème.Lorsque j'appelle ma fonction de téléchargement () de ma page de paramètres que l'observable est appelé à partir de la page Profil.Je utilisez la console.Log pour obtenir les informations.Je espère que vous comprenez de quoi je parle.

Je pense que l'observable devrait être au service. Et toutes les pages peuvent l'utiliser. Si je ne comprends pas correctement. S'il vous plaît essayez de me fournir une situation similaire sur Stackblitz et tenterons d'aider

1
votes

Pour vérifier si une valeur dans le stockage code> a changé, vous pouvez ajouter un listener code> à l'événement du stockage code> comme ceci:

document.addEventListener('storage', (e) => {  
    if(e.key === 'theyKeyYouWant') {
       // Do whatever you want
    }
});

0 commentaires

0
votes

Vous pouvez avoir un service qui s'occupe de la définition et de la récupération de valeurs vers / depuis localStorage dans des seigtures de propriété et des getters.

Une fois que le modèle est lié à des propriétés, vos composants respectifs seront mis à jour sur les détections de changement. P >

Par exemple, c'est votre service avec une propriété que vous souhaitez définir dans localStorage. p> xxx pré>

et vos composants comme: p>

<p>
  Item in App component - <b>{{item}}</b> 
</p>

0 commentaires

0
votes

 ngOnDestroy() {
    localStorage.removeItem('key');
  }

0 commentaires