ionic 3 上的 locastorage 和選項卡菜單

Question

我在 tabs1 上有一張地圖。

我單擊標記並發送 localstorage 標記標題並發送到 tab2。 那很好用。

that.passingData(dogwalkMarker.valueOf().parkid);

passingData(something: string) {
localStorage.setItem('passingData', JSON.stringify(something));
console.log(something);

但是當我第一次加載 tab2 后返回時出現問題。 在我加載應用程序上的任何頁面並加載選項卡 2 后，它可以正常工作並返回良好！

我不明白我在哪里做錯了。 謝謝。

我在選項卡 2 上有以下代碼。

scanOtopark() {
this.selectedOtopark = {};
let x = JSON.parse(localStorage.getItem('passingData'));

this.selectedOtopark = this.otoparks.find(otopark => otopark.parkqr === x);
if (this.selectedOtopark !== undefined) {
  this.otoparkFound = true;

  const toast = this.toastCtrl.create({
    message: "good",
    duration: 3000,
    position: 'top'
  });
  toast.present();
  console.log(this.selectedOtopark);
} else {
  this.otoparkFound = false;
  const toast = this.toastCtrl.create({
    message: 'something goes wrong',
    duration: 3000,
    position: 'top'
  });
  toast.present();
  this.selectedOtopark = {};
}

Answer 1

您的本地存儲似乎存在async問題。所以我強烈建議您使用本機存儲模塊。 由於它支持開箱即用的承諾，因此您可以輕松地在async情況下使用它。如果您也安裝 SQLite，它可以在所有平台上正常工作（尤其是iOS設備，這是需要的。）

文檔中的示例：

 // set a key/value
  storage.set('name', 'Max');

  // Or to get a key/value pair
  storage.get('age').then((val) => {
    console.log('Your age is', val);
  });

更新：

在first time load您需要使用：

 this.platform.ready().then(() => {

    });

更新 2：

x: any;

scanOtopark() {
this.selectedOtopark = {};


this.platformCtrl.ready().then(() => {
  this.storageCtrl.get('passingData').then((data) => {
    this.x= data;

  this.selectedOtopark = this.otoparks.find(otopark => otopark.parkqr === this.x);
  if (this.selectedOtopark !== undefined) {
    this.otoparkFound = true;

    const toast = this.toastCtrl.create({
      message: "good",
      duration: 3000,
      position: 'top'
    });
    toast.present();
    console.log(this.selectedOtopark);
  } else {
    this.otoparkFound = false;
    const toast = this.toastCtrl.create({
      message: 'something goes wrong',
      duration: 3000,
      position: 'top'
    });
    toast.present();
    this.selectedOtopark = {};
  }
 });
});

Answer 2

解決方案

那是我的錯，因為我在構造函數中定義了獲取數據庫代碼。 因為該頁面需要加載以獲取數據。

忘記代碼部分

constructor(private navCtrl: NavController,
          ...
          ...
          ...
          ...
          private storageCtrl: Storage,
          private platformCtrl: Platform,
          ) {

this.firebaseProvider.getOtoparks().subscribe((response) => {
  this.otoparks = response;
  console.log(this.otoparks);
});}

所以我在函數中導入該代碼並且它起作用了！

選項卡1

passingData(something: string) {
this.platformCtrl.ready().then(() => {
  this.storageCtrl.set('passingData', something);
  console.log(something);
});

選項卡2

passingData: any;
scanOtopark() {
this.platformCtrl.ready().then(() => {
  this.storageCtrl.get('passingData').then((data) => {
    this.passingData = data;
    this.firebaseProvider.getOtoparks().subscribe((response) => {
      this.otoparks = response;
      this.selectedOtopark = this.otoparks.find(otopark => otopark.parkqr === this.passingData);

      if (this.selectedOtopark !== undefined) {
        this.otoparkFound = true;
        console.log(this.selectedOtopark);


        const toast = this.toastCtrl.create({
          message: "good",
          duration: 3000,
          position: 'top'
        });
        toast.present();
      } else {
        this.otoparkFound = false;
        const toast = this.toastCtrl.create({
          message: 'something goes wrong',
          duration: 3000,
          position: 'top'
        });
        toast.present();
      }
    });
  });
});}