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 }

Answer 3

如你所说，window.localStorage是一种方法。您将数据存储在localStorage中，即使在关闭会话后也会保留。在angular中，您可以提供服务以简化存储中的访问特定数据。

要在您输入页面时从localStorage重新加载数据，您可以使用ngOnInit生命周期挂钩从存储中加载数据并填充您的视图。

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

3 个答案: