javascript - Keep data in page after refresh

Question

I have 2 pages in my angular project.One of them is main page.The other one is popup page. I enter data to input tags in my popup page,then when i click the add button data is added to main page.It is working nicely.I hold data an array in my main page.But if i refresh the page (main page) data does not seem anymore.Do you have any idea?

I made a some researches and have learned localstorage and cookies.But i can send data from a page to other page.What i want to do is keep data in page.How can i handle it?

What i understand is we use localstorage to send data another page.Am i right?

Answer 1

I would create a simple service which can help you to manage the localStorage data. Something simple like:

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()
  }

}