oop - Angular: How to make Class Property(variable) Constant That it should not lost data once component reloads

Question

So what I am doing is I am saving the Id of data in local storage so I can send it to the other component because when I go to the other component the data is lost and it shows undefined. I have tried it with rxjs as well. My question that when my data coming from service I want to save it in variable and make it constant while the component reloads in ngonit. So using rxjs I can send this data to various components.

 export class AppComponent {
   title = 'promisefitness';
   data:any;
   constructor(private _UserService:UserService, private _RxJsService:RxjsService) {
      ngOnInit(): void {
      this._UserService.Login(UserData).subscribe(DataComingFromBackEnd=>{
      this.data=DataComingFromBackEnd._Id;
 })
 this._RxjsService.SendData(this.data);
   }

 }

Now Here I have Declared the data in the class and I want that data should store the response coming from the backend permanently even if the component reloads. Then I can send this data anywhere to another component using Rxjs.

Please Guys Help me . Thanks in Advance

question from:https://stackoverflow.com/questions/65545535/angular-how-to-make-class-propertyvariable-constant-that-it-should-not-lost-d

Answer 1

If you want data to persist after reload you need to use LocalStorage, keep in mind that it does not retain the data permanently and there are certain limitations, I recommend reading about it a little bit first.

With that being said there are two basic commands that allow you to use localStorage which are: localStorage.setItem() and localStorage.getItem().

Here's a modified version of your code that works:

 export class AppComponent implements OnInit {
   title = 'promisefitness';
   data:any;
   constructor(private _UserService:UserService, private _RxJsService:RxjsService) {}
   
      ngOnInit(): void {
      this.data = this.getDataFromLocalStorage('myData');
      if (!this.data) {
         this._UserService.Login(UserData).subscribe(DataComingFromBackEnd => {
          this.data=DataComingFromBackEnd._Id;
         this._RxjsService.SendData(this.data);
          this.saveDataToLocalStorage(this.data);
       })
      } else {
       this._RxjsService.SendData(this.data);
      }
     }
   
   saveDataToLocalStorage(data: any): void {
    const stringifiedData = JSON.stringify(data)
    localStorage.setItem('myData', stringifiedData);
   }
   
   getDataFromLocalStorage(dataKey: string): any {
    const data = localStorage.getItem(dataKey);
    const parsedData = JSON.parse(data);
    return parsedData;
   }

 }