Angular 如何在5中重新加载页面后将值本地存储到变量

我在angular 5应用程序中使用了

WebStorage Service

来存储一个值，该值只选择一次，整个应用程序都可以访问。它可以正常工作，但是当重新加载页面时，存储在变量中的数据也会刷新。以下代码显示了我是如何实现“WebStorage服务”的：

constructor(
    private _http: HttpClient,
    @Inject(LOCAL_STORAGE) private storage: WebStorageService
  ) {
    this.setHeaders();
  }

  setHeaders() {
    this.headers =  new HttpHeaders().set('Content-Type', 'application/json');
  }
  /*JIF*/

  setJIF(key1, jifId, key2,  PoID) { // Setting Global Var
            this.storage.set(key1, jifId);
      this.jifId = this.storage.get(key1);
      this.setPO(key2 , PoID);

  }

  setPO(key2, PoID) {
    this.storage.set(key2, PoID);
    this.poId = this.storage.get(key2);
     console.log('POID', this.poId); // Gives Desired Output
    console.log('JIFID', this.jifId);//Gives Desired Output
  }
}

我希望

this.jifId

和

this.poId

保留其值，直到用户做出其他决定。我现在的做法是，当页面重新加载时，它会被清空。

使用本地存储

第一个设置项的内容（例如，如果要设置loggedInfo） 现在通过getItem获取对象

---

现在使用本地存储数据以供进一步使用…：）

有什么原因不使用cookies或本地存储吗？没有原因我对angular有些陌生，所以我可能不知道该怎么做。这个过程不应该使用cookies，但我不知道如何使用cookieslocalStorage@AtulStha，我可能弄错了，但我无法从代码片段中看出您要做什么。我不知道什么时候叫setJif。但是，当应用程序重新加载时，您似乎没有“获取”这些值，因此您将无法访问这些值。尝试在构造函数中执行getitem（）

let loggedInfo = {'poId':3,'poId':11}
localStorage.setItem('loggedInfo',JSON.stringify(loggedInfo));
//Convert Object to String

let loggedData = JSON.parse(localStorage.getItem('loggedInfo'));
//Convert String to Object and Local Storage data