如何从存储在 ionic 的 localStorage 中的 api 中检索数据数组

Question

我一直试图在我的应用程序的所有页面上传递从 php api 返回的数据，但无济于事。我也在这个平台上在谷歌上进行了系列搜索，但都失败了。

我有这行代码，它在登录后使用用户用户名通过 api 从 mysql 获取用户的详细信息。

现在，当获取用户信息时，它是一个数组，我想将该数组存储到 ionic 本地存储中，并从我的应用程序的任何位置检索它。

下面是我的代码：

user.ts

 ngOnInit(){

this.username = this.navParams.get('username');


var headers = new Headers();

headers.append("Accept", 'application/json');

headers.append('Content-Type', 'application/json' );

let options = new RequestOptions({ headers: headers });

let data = {

    username: this.username

     };

let loader = this.loading.create({

content: 'Preparing your page',

});

loader.present().then(() => {

this.http.post('http://edmon.com/api/retrieve.php',data, options)

.map(res => res.json())

    .subscribe(res => {

     loader.dismiss()

    this.items=res.server_response;

    console.log(this.items);

    });

    });
    //this.navCtrl.push(PostPage, data); 


     }

//Store to storage
     saveData() {
      var jsonObj = this.items;
      window.localStorage.setItem('myJsonKey', JSON.stringify(jsonObj));
      //console.log('my itmes:', jsonObj);
     }

如何才能从应用程序的任何位置获取这些数据？

谢谢。

Answer 1

这是您将数据存储到localStorage的时间。

 //Store to storage
 saveData() {
     var jsonObj = this.items;
     window.localStorage.setItem('myJsonKey', JSON.stringify(jsonObj));
     //console.log('my itmes:', jsonObj);
 }

这是您想要在应用中的任何位置获取数据的时候。

//Get from storage
getData(){
    window.localStorage.getItem('myJsonKey').then( data => {

        // if you want to convert it back to JSON
        // create variable retData in your ts file
        // retData = any;

        this.retData = JSON.parse(data);

    });
}

更简洁的方法是创建自己的提供程序并将所有用于存储管理的方法放在那里。然后在你的 ts 中调用这些方法。

例如，您在提供程序文件夹下的user-service.ts 中设置您的方法。创建您的方法，例如 setData() 或 getData()，以及它们的工作方式。

然后在您的 ts 文件中，导入您的 user-service.ts 提供程序并调用方法。

Answer 2

使 saveData() 如下所示

saveData(item:any) {
  window.localStorage.setItem('myJsonKey', JSON.stringify(item));
}

然后，像下面这样使用它

loader.present().then(() => {

 this.http.post('http://edmon.com/api/retrieve.php',data, options)

 .map(res => res.json())

 .subscribe(res => {

   loader.dismiss()

   //this.items=res.server_response;
   //console.log(this.items);
   this.saveData(res.server_response)
  });

});

--更新--

在其他页面中创建 getData() 函数。或者最好让Service通过存储来保存和加载项目。请参考angular service tutorrials。

getData():Promise<any>{
  return new Promise<any>((resolve,reject)=>{
    window.localStorage.getItem('myJsonKey').then((item)=>{
      resolve(JSON.parse(item))
    }).catch((err)=>{console.log(err); reject()})
  }); 
}

如果您熟悉async 和await，请考虑以下简单版本。

async getData():Promise<any>{
  try{
    let item = await window.localStorage.getItem('myJsonKey')
    return JSON.parse(item)
  }catch(err){
    console.log(err);
    throw ''
  }
}

用法

this.getData().then(...)