代码之家 › 专栏 › 技术社区 › Tonye Boro

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

ionic3 ionic-framework api arrays

Tonye Boro · 技术社区 · 8 年前

我一直在尝试在我的应用程序的所有页面上传递从php api返回的数据,但没有结果。我在谷歌上也在这个平台上进行了一系列搜索,但都失败了。

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

下面是我的代码:

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

我怎样才能从应用程序的任何地方获取这些数据呢?

2 回复 | 直到 8 年前

Mystery 8 年前

这里是您将数据存储到的时间 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);

    });
}

user-service.ts 在提供者文件夹下。创建您的方法,如 setData() 或 getData() ,以及它们将如何工作。

用户服务

Hyuck Kang 8 年前

制作 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() 其他页面中的函数。或者最好是服务通过存储器保存和加载项目。请参阅 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(...)