即使在页面以角度5重新加载后如何将值本地存储到变量中

Posted 2023-02-22

【中文标题】即使在页面以角度5重新加载后如何将值本地存储到变量中

【英文标题】：How to store a value locally to a variable even after the page reloads in angular 5

【发布时间】：2018-10-23 16:54:01

【问题描述】：

我在我的 Angular 5 应用程序中使用了WebStorageServie 来存储一个被选择一次并且可供整个应用程序访问的值。它工作得很好，但是当页面重新加载时，存储在变量中的数据也会被刷新。以下代码显示了我是如何实现 `WebStorageService' 的：

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 保留其价值，直到用户另有决定。而我现在这样做的方式是在页面重新加载时被清空。

【问题讨论】：

有什么理由不使用 cookie 或 localStorage？

没有理由我对角度有点陌生，所以我可能只是不知道方法。该过程不应使用 cookie 完成，但我不知道如何使用 localStorage

@AtulStha，我可能弄错了，但我无法从您的代码 sn-p 中看出您要做什么。我不知道何时调用 setJif。但是，当应用程序重新加载时，您似乎没有“获取”值，因此您将无权访问这些值。尝试在构造函数中执行 getitem()

【参考方案1】：

使用本地存储

首先设置项目的东西（如果你想设置loggedInfo）

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

现在通过 getItem 获取您的对象

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

现在使用您的本地存储数据以供进一步使用……:)