ionic 3 中的本地存储和选项卡菜单

Posted 2023-03-05

【中文标题】ionic 3 中的本地存储和选项卡菜单

【英文标题】：locastorage and tabs menu on ionic 3

【发布时间】：2018-03-27 11:23:42

【问题描述】：

我在 tabs1 上有一张地图。

我单击标记并发送本地存储标记标题并发送到 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 = ;

【参考方案1】：

您的本地存储似乎有async 问题。所以我强烈建议您使用native storage module。由于它支持开箱即用的 Promise，因此您可以轻松地在 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 = ;
  
 );
);

【讨论】：

你好。 @Sampath 我试过这个。但它仍然会出现同样的问题。 this.storageCtrl.get('passingData').then((data) => this.x= data; console.log(data); );

查看更新。

我将所有代码复制到 this.platform.ready().then(() => ); 中，但不起作用。

你能显示last code的变化吗？把它放在你的问题之下。

你在哪里用过这个this.x= data;？

【参考方案2】：

解决方案

那是我的错，因为我在构造函数中定义了获取数据库代码。因为该页面需要加载才能获取数据。

忘记的代码部分

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

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

所以我在函数中导入该代码并且它可以工作！

tab1

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

tab2

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();
      
    );
  );
);