刷新后将数据保留在页面中

Question

我的角度项目中有2页.其中一个是主页面.另一个是弹出页面.我在弹出页面中输入数据输入标签,然后当我点击添加按钮时,数据被添加到主页面.它运行良好.我在主页面中保存数据一个数组.但是如果我刷新页面(主页面)数据似乎不再存在.你有什么想法吗？

我做了一些研究,并学习了本地存储和cookies.但我可以将数据从页面发送到其他页面.我想做的是将数据保存在页面中.我该如何处理它？

我的理解是我们使用localstorage将数据发送到另一页.我是对的吗？

Answer 1

我会创建一个简单的服务,可以帮助您管理localStorage数据.简单的东西:

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

}

Answer 2

这可以通过localStorage完成。

一个例子：

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

上面是保存它以取回它的方法，您可以在ngOnInit中执行以下操作：

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

编辑

进口：

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

在您的组件（类）上实现它：

export class YourClass implements OnInit

在构造函数之后：

ngOnInit() { // your code here }