如何在angular6中刷新后保留选定的localStorage值列表？答案

【问题标题】：How to keep list of selected localStorage values after refresh in angular6?如何在angular6中刷新后保留选定的localStorage值列表？
【发布时间】：2020-01-11 07:07:23
【问题描述】：

我有 localStorage 数据列表，我从列表中选择了一个选项，但在我刷新后，所选数据消失了。

selectedColumns: any[] = [];


this.listData =  [
{ field: "id", header: "Id", type: "number", value: "id", width: "100px" },
{ field: "description", header: "Description", type: "", value: "description", width: "150px" },
{ field: "status", header: "Status", type: "select", value: "status", width: "100px" },
{ field: "userName", header: 'Moved By', type: "", width: "100px" },
{ field: "lastName", header: 'Moved By', type: "", width: "100px" },
{ field: "rule", header: 'rule', type: "", width: "100px" },
{ field: "domain", header: 'domain', type: "", width: "100px" },
{ field: "date", header: 'date', type: "", width: "100px" },
{ field: "time", header: 'time', type: "", width: "100px" },
{ field: "address", header: 'Moved By', type: "", width: "100px" }
]

for (let i = 0; i <= 8; i++) {
      this.selectedColumns[i] = this.listData [i];
      localStorage.setItem("column_selections", JSON.stringify(this.selectedColumns));
    }

    if (JSON.parse(localStorage.getItem("column_selections"))) {
      var lsData = JSON.parse(localStorage.getItem("_selections"));
      if (lsData) {
        this.selectedColumns = lsData;
      } else {

        for (let i = 0; i <= 7; i++) {
          this.selectedColumns[i] = this.listData [i];
        }

        localStorage.setItem("column_selections", JSON.stringify(this.selectedColumns));
      }
    }

    else if(localStorage!= null){
      if(!localStorage.getItem(this.listData ) || JSON.parse(localStorage.getItem('listData ')).length === 0){
      localStorage.setItem("listData ", JSON.stringify(this.listData ));
    }}

    else {
      for (let i = 0; i <= 7; i++) {
        this.selectedColumns[i] = this.listData [i];

      }
      localStorage.setItem("column_selections", JSON.stringify(this.selectedColumns));

    }

刷新后，我希望选定的 localStorage 数据可见。请帮助我怎么做或者我哪里出错了。

【问题讨论】：

您的示例是 a) 不完整和 b) 我找不到任何角码？您在哪里调用此代码？在 stackblitz 上提供一个显示问题的最小示例。

标签： html angular typescript angular-material angular6

【解决方案1】：

有 2 种解决方案，具体取决于您存储数据的方式。我认为第一个也是最常见的场景是存储变量状态，然后在 ngOnInit 上重新加载它。您还可以设置一个通用服务来处理存储控制器状态，并在 ngOnInit 中重新加载控制器状态。

另一种解决方案是使用服务，并在那里加载和存储状态...

private _myObj: SomeObj;

get myObj(): SomeObj {
    if (!this._myObj) {
      const tmpObj = sessionStorage.getItem('MyService.myObj');
      this._myObj= (!tmpObj) ? new SomeObj () : Object.assign(new SomeObj , JSON.parse(tmpObj));
    }
    return this._myObj;
  }

  set myObj(myObject: SomeObj) {
    this._myObj = myObject;
    sessionStorage.setItem('MyService.myObj', JSON.stringify(this._myObj));
  }

如果您只是在用户会话期间进行持久化，则 sessionStorage 是更好的位置，localStorage 应该只用于您想要“永远”持久化的项目，例如偏好、语言选择等...

【讨论】：