Conserver les données dans la page après actualisation

J'ai 2 pages de mon angulaire du projet.L'un d'eux est la page principale.L'autre est contextuel de la page. - Je saisir les données d'entrée des balises dans mon menu contextuel de la page,puis quand je clique sur le bouton ajouter des données est ajouté à la page principale.Il fonctionne parfaitement.Je tiens données d'un tableau dans ma page principale.Mais si j'actualise la page (page principale) de données ne semble pas plus.Avez-vous une idée?

J'ai fait des recherches et ont appris localstorage et les cookies.Mais je peut envoyer des données à partir d'une page à l'autre page.Ce que je veux faire est de conserver les données dans la page.Comment puis-je gérer cela?

Ce que je comprends, c'est que nous utilisons localstorage pour envoyer des données à une autre page.Suis-je le droit?

InformationsquelleAutor | 2017-10-06
  1. 6

    Cela peut être fait avec un localStorage.

    Un exemple: 

    localStorage.removeItem('Array');
localStorage.setItem('Array', JSON.stringify(this.array));

    Ci-dessus est de savoir comment vous enregistrer pour obtenir à nouveau vous faire dans le ngOnInit:

    this.array = JSON.parse(localStorage.getItem('Array'));
localStorage.removeItem('Array'); //to clear it again.

    MODIFIER

    D'importation:

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

    Mettre en œuvre sur votre composant(classe):

    export class YourClass implements OnInit

    Et après le constructeur:

    ngOnInit() { //your code here }
    • Je vais ajouter tout le code à la page principale.Suis-je le droit?
    • Oui. Les données seront disponibles sur toute autre page d', Localstorage permet d'enregistrer dans le navigateur. Si vous écrivez JSON.parse(localStorage.getItem('Array')) dans la console du navigateur, vous obtenez la sortie de.
    • Je vous remercie beaucoup.Je vais ajouter d'obtenir des processus de ngOnInıt méthode
    • Vous êtes les bienvenus
    • Comment puis-je utiliser ngOnInit méthode? Dois-je l'ajouter en tant que module de projet? Quand je le définir comme une fonction, il ne démarre pas 🙁
    • Cochez la case modifier.
    • J'ai commencé à apprendre angulaire il y a 5 jours.Je n'ai pas de classe.Mon desing est comme ça angular.module('app') .controller('MyController', MyController); function MyController($scope, ...) { // controller definition }
    • Ce regard comme AngularJS (v1.0+). Les nouveaux Angulaire (v4.4.4) angulaire.io.
    • que faire si je veux le faire sans localStorage, cache, cookies?
    • L'envoyer à une base de données et l'enregistrer.
    • Dans cette mise en œuvre, si je fais pop-up que composant réutilisable puis, quand je suis de la navigation d'un composant à un autre composant , je veux effacer le localstorage. Si je vous écris dans ngdestroy , puis ngdestroy ne sera pas appelé quand je change de route de l'url, puis le même local de stockage de données sera disponible pour le prochain volet. ce qui est faux. Lorsque nous rafraîchir sur la même route, puis le stockage local sgould persistent mais de la navigation d'un ordi à l'autre devrait être supprimé, comment pouvons-nous y parvenir?
    • Un ngOnDestroy() {} doit toujours becalled. À moins que vous ne pas détruire le composant, si ce n'est l'utilisation *ngIf.

    InformationsquelleAutor Swoox
  2. 8

    Je voudrais créer un service simple qui peut vous aider à gérer le localStorage de données. Quelque chose de simple comme:

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

@Injectable()
export class SharingService {
  private storageName: string = "Settings";

  constructor() { }

  setSettings(data: any) {
    localStorage.setItem(this.storageName, JSON.stringify(data));
  }

  getUserSettings() {
    let data = localStorage.getItem(this.storageName);
    return JSON.parse(data);
  }

  clearUserSettings() {
    localStorage.removeItem(this.storageName);
  }

  cleanAll() {
    localStorage.clear()
  }

}
    • Je vous remercie beaucoup.Je vais injecter ce service à mon contrôleur.
    InformationsquelleAutor m33n
  3. 1

    Comme vous l'avez dit, window.localStorage est un moyen d'aller. Vous pouvez stocker des données dans localStorage et il sera conservé même après la fermeture de la session. Dans angulaire, vous pouvez rendre un service à simplifier l'accès des données spécifiques de stockage.

    Pour recharger les données de localStorage que vous entrez dans la page, vous pouvez utiliser ngOnInit cycle de vie du crochet de charger des données de stockage et de remplir votre point de vue.

    • Mes données sont dans le tableau dans ma page principale. Maintenant, je vais ajouter ngOnInit méthode à ma page principale et je vais obtenir les données avec localStorage.Je ne vais pas ajouter du code popup page.Je suis de droite? Je peux faire l'ensemble du processus de partout dans la page principale.
    • Oui, vous pouvez charger des données en arrière-plan avec ngOnInit.
    • Thabk vous beaucoup.Je suis à la recherche d'ngOnInıt à l'aide de rihght maintenant
    InformationsquelleAutor Piotr Pliszko