Question

我正在ngOnDestroy中设置localStorage并在ngOnInit中检索它。当用户导航到其他视图但未在退出浏览器时设置localStorage时，此方法有效。

//currentnote is my variable which is connected with 2 way binding with the input field
ngOnInit() {
        let unsavedNote = localStorage.getItem('unsavedNote');
        if(unsavedNote) {
          this.currentnote=unsavedNote;
        }
    } 

ngOnDestroy(){`enter code here`
      if(this.currentnote && this.currentnote!=""){
        localStorage.setItem('unsavedNote', this.currentnote);
      }
    }

Answer 1

根据您在评论中的描述，这是预期的行为。 OnDestroy()仅在组件之间切换时被调用。您可以在此question上查看有关调用时间的更多信息。

关于您评论中的案例：

之所以有效，是因为当您移至其他视图时它会保存。
的工作原因与情况1相同。
由于上述原因显示了旧数据。保存数据的唯一时间是切换视图时，之后才关闭浏览器，因此不会调用OnDestroy()，也不会保存本地存储。

您更好的方法是使用保存按钮或调用本地存储保存的方法。如果您希望它是自动的，则必须节省输入字段的模糊性或击键次数，但这可能会很快变得混乱。

Answer 2

您可以在组件中添加before {unload} HostListener并执行与ngOnDestroy相同的逻辑：

@HostListener('window:beforeunload')
onBeforeUnload() {
    if(this.currentnote && this.currentnote!=""){
        localStorage.setItem('unsavedNote', this.currentnote);
    }
}

查看答案Is there any lifecycle hook like window.onbeforeunload in Angular2?

想要记住有关导航和退出浏览器的未保存数据

2 个答案: