Не определено в localStorage.getItem в Angular - PullRequest
Новая
       103

Не определено в localStorage.getItem в Angular

0 голосов
/ 16 июня 2020

Я работаю над проектом с несколькими компонентами, которым необходимо совместно использовать данные, сохраненные в локальном хранилище. Мне удается сохранить их как объект с помощью setItem, но когда я пытаюсь их получить, я получаю «undefined» в 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:

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

Спасибо за вашу поддержку в решении этой проблемы!

Ответы [ 2 ]

2 голосов
/ 16 июня 2020

Это потому, что поле showStorage повторно объявляется при инициализации каждого компонента. Таким образом, после нажатия кнопки To summary, которая перенаправляет на другое представление, поле showStorage уничтожается, как и весь компонент. После возврата к FlightComponent он снова инициализируется, поэтому showStorage равен undefined. Чтобы он работал так, как вы ожидаете, вы можете присвоить ему значение при создании FlightComponent: 

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

. Таким образом, переменная будет содержать значение вашего элемента localStorage или пустой объект, если значение не было еще не установлено.

1 голос
/ 16 июня 2020

Что ж, я действительно получаю выгоду, когда пробую это на своей консоли. https://jsfiddle.net/wickedrahul/mp68hd09/2/

Скорее всего, вам может потребоваться вызвать saving() внутри testLocal(), чтобы можно было присвоить значение 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);
...