On page refresh Data is getting destroyed in angular

Question

Hi I am trying to show the number of assignments and publications. If I go through Router links the number of assignments and publications is getting displayed but when I refresh the page data is not visible. I think it is getting destroyed. Any help is appreciated. Following is the code

//home.ts

import { Component, ViewChild,HostListener, OnDestroy, OnInit } from "@angular/core";
import { Router } from '@angular/router';
import { QuizService } from '../../Service/Quizservice';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';

@Component({
selector: "home-page",
templateUrl: "./home.page.html", styleUrls: ["../app.component.css"],

})
export class HomePage implements OnInit, OnDestroy {
teachername;
quizcount;
Published;
canvas: any;
ctx: any;
@ViewChild('mychart') mychart;
constructor(public router: Router, private QuizService: QuizService, private http: HttpClient) 
{

}
ngOnInit() {
this.teachername = sessionStorage.getItem('teachername');
if (this.teachername == undefined) {
  this.logout();
}
var date = new Date();
date.setDate(date.getDate() - 30);
var jsonobj1 = [
  {
    "Createdby": sessionStorage.getItem("Td"),
    "ispublished": 1,
  }];
this.QuizService.getQuizcount(jsonobj1).subscribe(data => this.Published = data["Count"])
var jsonobj = [
  {
    "Createdby": sessionStorage.getItem("Td")
  }];
this.QuizService.getQuizcount(jsonobj).subscribe(data => this.quizcount = data["Count"])
document.getElementById("btnGroupDrop1").innerText = this.teachername;
}
logout() {
this.router.navigate(["/"]);
sessionStorage.clear();
}
ngOnDestroy(){
this.ngOnInit();
}

@HostListener('window:popstate', ['$event'])
onPopState(event) {
window.history.forward();
this.router.navigate(["/home"]);
}
}

//home.html

<div class="card-footer" style="background: #fff;">
      <div class="stats">
        <!-- <i class="material-icons">date_range</i>  -->
        Total assignment&nbsp;:&nbsp;{{quizcount}}
      </div>
    </div>

Answer 1

Save the data in the session storage of the browser and once you logout clear the storage.

sessionStorage.setItem("published", pubcount);
sessionStorage.setItem("assignment", assgnCount);

The above code will set the count of both published and assignment in the session storage.

Under the hook ngOnInit() you can do something like this:

ngOnInit()
{
 pubcount = sessionStorage.getItem("published");
 assgnCount= sessionStorage.getItem("assignment");
}

Once the page is refreshed the above code will fetch the counts from session storage and you can utilize them.

Hope this helps.