Home page does not get updated when you add new data using local storage

Hi, I am fairly new at angular and ionic 5. I was testing out some mobile development and for some reason, home page is not getting updated with latest valued stored in local storage. Any help is greatly appreciated.

in short, flow is home or folder page (by defualt from ionic) has add button -> takes you to notepage where you can enter headername etc. -> which gets saved in local storage via service. When I am calling service to get latest to show all the notes, nothing is showing up.

please find the code below for your reference in link or pasted below:

Again, thank you for any help!!


export class FolderPage implements OnInit {
public folder: string;
public noteList: NotePageComponent;

ngOnInit() {
this.folder = this.activatedRoute.snapshot.paramMap.get(‘id’);
console.log(‘folderpage ngOnInit’);

this.localStorage.read().then(data => {
  this.noteList = data;
  console.log('folderpage ngOnInit 2: ' + this.noteList);



export class NotePageComponent implements OnInit {

public headerName = ‘’;
public text = ‘’;
public lastSavedTime = new Date();
private editMode = false;
noteList = ;

constructor(private localStorage: LocalStorageService,
private router: Router,
private activatedRoute: ActivatedRoute) {

ngOnInit() {
console.log(‘notepage ngOnInit’);
if (this.activatedRoute.snapshot.paramMap.get(‘name’)) {
console.log('NotePageComponent: ', this.activatedRoute.snapshot.paramMap.get(‘name’));
const noteHeaderName = this.activatedRoute.snapshot.paramMap.get(‘name’);

  if (noteHeaderName) {
    const note = this.localStorage.getSpecificNote(noteHeaderName).then(data => data = note);
    this.headerName = note.headerName;
    this.text = note.text;
    this.editMode = true;


okClick() {
if (!this.editMode) {
console.log(‘okClick non-editMode’);
this.localStorage.read().then(data => {
this.noteList = data;
console.log(‘okClick 2: ’ + this.noteList);
else {
console.log(‘okClick editMode’);
this.editMode = false;

providedIn: ‘root’

export class LocalStorageService {

private noteId = 1;

constructor(private storage: Storage) { }

public addNotePageToList(notePage: NotePageComponent)
const item = { headerName: notePage.headerName, lastSavedTime: notePage.lastSavedTime, text: notePage.text };
console.log(’***inside addNotePageToList’, notePage);
this.noteId = this.noteId + 1;
return this.storage.set(this.noteId.toString(), JSON.stringify(item));

public read(): Promise<NotePageComponent>{

console.log('** inside read');
const notes: Array<NotePageComponent> = [];
return new Promise(resolve => {
  this.storage.forEach(data => {
    console.log('***inside foreach', data);
  return resolve(notes);


You don’t need to return a promise with localStorage. Just let yourVariable = localStorage.getItem ('YOUR_VARIABLE') it’s ok to get it and localStorage.setItem('name', 'value') it’s ok to set it.

Notice I there is no this.

Hope it helps.

1 Like

@RaulGM thanks…I changed it to localstorage as you mentioned and also used observable to update the list in home page as needed. Thanks for your help!!

Hang on a minute here.

Generally speaking, what you had before with Ionic Storage was better, because localstorage is not guaranteed to persist if the underlying OS decides to evict your stuff.

That being said, storing components anywhere is crazy. Component lifecycle must be managed by the framework. The only things you want to be storing are POJOs.

If you’re new to Angular, I recommend taking the time to go through the Tour of Heroes to familiarize yourself with the fundamentals.

1 Like

@rapropos sure, thanks!!