Javascript 刷新后将数据保留在页面中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46601155/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Keep data in page after refresh
提问by Swoox
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?
我的 angular 项目中有 2 个页面。其中一个是主页。另一个是弹出页面。我在弹出页面中输入数据以输入标签，然后当我单击添加按钮时，数据将添加到主页。它运行良好。我在主页中保存数据数组。但是如果我刷新页面（主页）数据似乎没有了。你有什么想法吗？
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?
我做了一些研究，并了解了本地存储和 cookie。但是我可以将数据从一个页面发送到另一个页面。我想做的是将数据保留在页面中。我该如何处理？
What i understand is we use localstorage to send data another page.Am i right?
我的理解是我们使用 localstorage 将数据发送到另一个页面。我说得对吗？
回答by m33n
I would create a simple service which can help you to manage the localStorage data. Something simple like:
我会创建一个简单的服务来帮助您管理 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()
}
}
回答by Swoox
This can be done with a localStorage.
这可以通过 localStorage 来完成。
An example:
一个例子：
localStorage.removeItem('Array');
localStorage.setItem('Array', JSON.stringify(this.array));
The above is how you save it to get it back you do this in the ngOnInit:
以上是您如何保存它以取回您在ngOnInit 中执行此操作的方法：
this.array = JSON.parse(localStorage.getItem('Array'));
localStorage.removeItem('Array'); // to clear it again.
EDIT
编辑
Import:
进口：
import { OnInit } from '@angular/core';
import { OnInit } from '@angular/core';
Implement it on your component(class):
在您的组件（类）上实现它：
export class YourClass implements OnInit
export class YourClass implements OnInit
And after constructor:
在构造函数之后：
ngOnInit() { // your code here }
回答by Piotr Pliszko
As you said, window.localStorageis a way to go. You store data in localStorageand it will be preserved even after closing session. In angular, you can make a service to streamline access specific data from storage.
正如你所说，window.localStorage是一种方法。您将数据存储在其中localStorage，即使在关闭会话后也会保留。在 angular 中，您可以创建一个服务来简化从存储中访问特定数据的过程。
To reload data from localStorageas you enter page, you can use ngOnInitlifecycle hook to load data from storage and fill your view.
要localStorage在进入页面时重新加载数据，您可以使用ngOnInit生命周期钩子从存储加载数据并填充视图。
