Javascript 在Angular中的localStorage.getItem上未定义

我正在进行一个项目，其中有多个组件需要共享保存在本地存储中的数据。我设法用setItem将它们保存为对象，但当我试图获取它们时，在console.log中未定义它们

点击保存功能：

  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的组件：

组件1.TS：

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

用于摘要的HTML：

Departure date: {{ showStorage.departureDate}}   

闪电战：

---

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

好吧，当我在我的控制台上尝试这个时，我确实得到了价值。

您可能需要在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);

---

嗯，当我在我的控制台上尝试这个时，我确实得到了价值。

您可能需要在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);

这是因为showStorage字段在每个组件init上重新声明。因此，单击重定向到另一个视图的ToSummary按钮后，showStorage字段以及整个组件都将被销毁。返回FlightComponent后，它将再次初始化，这就是showStorage未定义的原因。要使其按预期工作，可以在创建FlightComponent时为其指定一个值：

这样，如果尚未设置值，变量将保存localStorage项或空对象的值。

这是因为showStorage字段在每个组件init上重新声明。因此，单击重定向到另一个视图的ToSummary按钮后，showStorage字段以及整个组件都将被销毁。返回FlightComponent后，它将再次初始化，这就是showStorage未定义的原因。要使其按预期工作，可以在创建FlightComponent时为其指定一个值：

---

这样，如果尚未设置值，则变量将保存localStorage项或空对象的值。

localStorage并不是为了方便组件之间的数据共享。为此，请查看singleton服务。在您的情况下，如果在保存完成之前调用testLocal函数，那么变量showStorage还没有分配任何值。在另一个组件中，您将执行相同的JSON.parselocalStorage.getItemflightDetails。但在尝试使用本地存储之前，通常最好先检查从本地存储获取的数据是否为空。这意味着数据不可用。localStorage并不是为了促进组件之间的数据共享。为此，请查看singleton服务。在您的情况下，如果在保存完成之前调用testLocal函数，那么变量showStorage还没有分配任何值。在另一个组件中，您将执行相同的JSON.parselocalStorage.getItemflightDetails。但在尝试使用本地存储之前，通常最好先检查从本地存储获取的数据是否为空。这意味着数据不可用。谢谢天竺葵！：那么在摘要组件中显示数据的情况又如何呢？考虑到我想要引用单个对象元素而不是整个元素，应该如何做呢？我知道如何在一个组件中实现这一点，但我在使用localStorage中的getItem时遇到了一个问题。在localStorage中，只能存储字符串值。这就是为什么在保存到localStorage之前必须使用JSON.stringifydataStorage。因此，要从localStorage读取对象，您需要JSON.parse它：this.showStorage=JSON.parselocalStorage.getItemflightdetails | |{}；。注意，我使用了| |{}语法——这对于getItem返回null的情况是必要的，这将导致JSON.parse也返回null，并且可能导致以后的错误天竺葵！：那么在摘要组件中显示数据的情况又如何呢？考虑到我想要引用单个对象元素而不是整个元素，应该如何做呢？我知道如何在一个组件中实现这一点，但我在使用localStorage中的getItem时遇到了一个问题。在localStorage中，只能存储字符串值。这就是为什么在保存到localStorage之前必须使用JSON.stringifydataStorage。因此，要从localStorage读取对象，您需要JSON.parse它：this.showStorage=JSON.parselocalStorage.getItemflightdetails | |{}；。请注意，我使用了| |{}语法——这对于getItem返回null的情况是必要的，这将导致JSON.parse也返回null，并且可能会导致错误。谢谢！我在testlocal中添加了这个函数，它也很有帮助。为什么要更改此选项。showStorage=JSON.parselocalStorage.getItemflightdetails；返回JSON.parselocalStorage.getItemflightdetails@qshyhoo那只是在小提琴上测试。在您的实际代码中，您可能希望将此保留在代码中显示的位置。谢谢！我在testlocal中添加了这个函数，它也很有帮助。为什么要更改此选项。showStorage=JSO

---

N.parselocalStorage.getItemflightdetails；返回JSON.parselocalStorage.getItemflightdetails@qshyhoo那只是在小提琴上测试。在实际代码中，您可能希望将this.something保留在代码中存在的位置。