Angular 中的 localStorage.getItem 未定义

Question

我正在处理一个包含多个组件的项目，这些组件需要共享保存在本地存储中的数据。我设法使用 setItem 将它们保存为一个对象，但是当我试图获取它们时，我在 console.log 中得到了 "undefined"。

保存功能（点击）：

  saving() {
    let dataStorage = {
      departureDate: this.departureDate,
      returnDate: this.returnDate,
      departureAirport: this.departureAirport,
      arrivalAirport: this.destinationAirport,
      passengersNumber: this.numberOfPassengers
    };
    localStorage.setItem("flightdetails", JSON.stringify(dataStorage));
    this.showStorage = JSON.parse(localStorage.getItem("flightdetails"));
  }

  testLocal() {
    console.log(this.showStorage); //Here I get undefined
  }

声明所有变量：

public numberOfPassengers: number = 1;
  public departureDate: any;
  public returnDate: any;
  public departureAirport: string;
  public destinationAirport: string;
  public showStorage: any;

我也不知道如何调用另一个组件中的本地存储元素来显示。目前我有一个名为 summary:

的组件

COMPONENT.TS:

export class SummaryComponent implements OnInit {
  public showStorage = "";
  constructor() {
    this.showStorage = localStorage.getItem("flightDetails");
  }

HTML 摘要：

Departure date: {{ showStorage.departureDate}}

STACKBLITZ：https://stackblitz.com/edit/flight-date-pikcer

感谢您对解决此问题的支持！

Answer 1

好吧，当我在我的控制台上尝试这个时，我确实得到了价值。 https://jsfiddle.net/wickedrahul/mp68hd09/2/

您可能需要在 testLocal() 中调用 saving()，以便可以分配 this.showStorage 的值。

  function saving() {
    let dataStorage = {
      departureDate: "foo",
      returnDate: "foo",
      departureAirport: "foo",
      arrivalAirport: "foo",
      passengersNumber: "foo"
    };
    localStorage.setItem("flightdetails", JSON.stringify(dataStorage));
    return JSON.parse(localStorage.getItem("flightdetails"));
  }

  function testLocal() {
    return saving();
  }

   var a = testLocal()
   console.log(a);

Answer 2

这是因为 showStorage 字段在每个组件 init 上重新声明。因此，在单击重定向到另一个视图的 To summary 按钮后，showStorage 字段以及整个组件都被销毁了。回到 FlightComponent 后，它再次初始化，这就是 showStorage 是 undefined 的原因。为了让它像你期望的那样工作，你可以在创建时给它赋值 FlightComponent:

constructor(private router: Router) {
  this.showStorage = localStorage.getItem("flightdetails") || {};
}

这样变量将保存您的 localStorage 项目的值或空对象（如果尚未设置该值）。

Angular 中的 localStorage.getItem 未定义

Undefined on localStorage.getItem in Angular

javascript

undefined

local-storage

angular