在 Angular 的 localStorage.getItem 上未定义答案

【问题标题】：Undefined on localStorage.getItem in Angular在 Angular 的 localStorage.getItem 上未定义
【发布时间】：2020-10-05 18:04:14
【问题描述】：

我正在处理一个包含多个组件的项目，这些组件需要共享保存在本地存储中的数据。我设法使用 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;

我也不确定如何调用另一个组件中的本地存储元素来显示。目前我有一个叫做摘要的组件：

组件.TS：

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

HTML 总结：

Departure date: {{ showStorage.departureDate}}

堆栈闪电战：https://stackblitz.com/edit/flight-date-pikcer

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

【问题讨论】：

localStorage 并不是为了促进组件之间的数据共享。为此，请查看单例服务。在您的情况下，如果您在 saving() 完成之前调用 testLocal() 函数，则变量 showStorage 尚未分配任何值。在另一个组件中，您将执行相同的JSON.parse(localStorage.getItem("flightDetails"))。但是在尝试使用之前检查从本地存储中获取的数据是否为null 通常是一个好习惯。这意味着数据不可用。

标签： javascript angular local-storage undefined

【解决方案1】：

这是因为showStorage 字段在每个组件初始化时都重新声明了。因此，在单击重定向到另一个视图的To summary 按钮后，showStorage 字段以及整个组件都会被破坏。回到FlightComponent 后，它再次被初始化，这就是为什么showStorage 是undefined。为了使其按预期工作，您可以在创建 FlightComponent 时为其分配一个值：

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

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

【讨论】：

谢谢！ | Dziękuję！ :) 那么在摘要组件中显示数据的情况呢？应该如何记住，我想引用单个对象元素而不是整个元素？我知道如何在一个组件中做到这一点，但我在使用 localStorage 中的 getItem 时遇到了问题。
在localStorage 中，您只能存储字符串值。这就是为什么您必须在保存localStorage 之前JSON.stringify(dataStorage)。所以要从localStorage 读取对象，您需要JSON.parse() 它：this.showStorage = JSON.parse(localStorage.getItem("flightdetails")) || {};。请注意，我使用 || {} 语法 - 对于 getItem 返回 null 的情况是必要的，这会导致 JSON.parse() 也返回 null 并且可能会导致以后出现错误

【解决方案2】：

嗯，当我在控制台上尝试这个时，我确实得到了价值。 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);

【讨论】：

谢谢！我将该功能添加到本地测试中，它也有帮助。为什么要更改 this.showStorage = JSON.parse(localStorage.getItem("flightdetails"));返回 JSON.parse(localStorage.getItem("flightdetails"));?
@qshyhoo 只是为了测试小提琴。在您的实际代码中，您可能希望将 this.something 保留在代码中的位置。