Angular 5中如何让变量在页面重载后仍保留本地存储的值

嘿，我懂你的困扰！你已经把jifId和poId存在WebStorage里了，但页面一刷新，组件里的这两个变量就变成空的了——这是因为你只在调用setJIF方法的时候给它们赋值，可页面重载后组件会重新初始化，这时候你没从存储里把之前保存的值读回来赋值给变量。

解决方案：在组件初始化时从WebStorage读取值 #

你需要在组件的ngOnInit生命周期钩子（或者构造函数里，不过ngOnInit是更推荐的初始化时机）里，主动从storage中取出保存的jifId和poId，赋值给组件的对应变量。这样每次页面刷新、组件重新加载时，都会自动恢复之前存储的值。

修改后的代码示例 #

import { Component, OnInit, Inject } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { LOCAL_STORAGE, WebStorageService } from 'angular-webstorage-service';

@Component({
  // 你的组件元数据（比如selector、templateUrl等）
})
export class YourComponent implements OnInit {
  headers: HttpHeaders;
  jifId: any;
  poId: any;

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

  ngOnInit() {
    // 页面初始化时从存储读取值，恢复组件变量
    this.jifId = this.storage.get('你的key1名称'); // 替换成你实际使用的key1
    this.poId = this.storage.get('你的key2名称'); // 替换成你实际使用的key2
    console.log('页面重载后恢复的JIFID:', this.jifId);
    console.log('页面重载后恢复的POID:', this.poId);
  }

  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
  }
}

关键说明 #

• 页面重载时，Angular会重新创建组件实例，ngOnInit会被触发，这时候我们从WebStorage中读取之前保存的值，赋值给jifId和poId，就能让变量恢复到之前的状态。
• 一定要保证ngOnInit里使用的key和setJIF、setPO方法里的key完全一致，不然会读不到存储的值。
• 这样修改后，只要用户不主动调用setJIF修改值，或者手动清除浏览器的本地存储，这两个变量就会一直保留之前的值，哪怕页面刷新也不会清空。

内容的提问来源于stack exchange，提问作者Atul Stha