Ionic 3 HTTP请求后无法存储数据至Storage问题求助

嘿，我来帮你捋捋这个问题哈～你说已经导入了Ionic Storage但在浏览器里看不到存储的数据，结合你贴的代码，我觉得大概率是这几个原因，咱们一个个来排查：

1. 回调函数里的this指向错误（最可能的原因） #

你在cordova.plugin.http.sendRequest的成功回调里用了普通的function()，这时候函数内部的this已经不是你的组件实例了，this.store其实是undefined，自然没法执行存储操作。

解决办法有两种，选一种就行：

• 换成箭头函数，箭头函数会继承外部上下文的this：

cordova.plugin.http.sendRequest('http://127.0.0.1:5000/api/login/', options, (response) => {
  try {
    response.data = JSON.parse(response.data);
    this.store.set('token', JSON.stringify(response.data.token));
    this.navCtrl.setRoot(HomePage);
  } catch(e) {
    // 你的错误处理逻辑
  }
}, (error) => {
  // 错误回调也建议换成箭头函数
});

• 提前保存组件的this到变量里：

const that = this; // 先把组件的this存起来
cordova.plugin.http.sendRequest('http://127.0.0.1:5000/api/login/', options, function(response) {
  try {
    response.data = JSON.parse(response.data);
    that.store.set('token', JSON.stringify(response.data.token)); // 用that代替this
    that.navCtrl.setRoot(HomePage);
  } catch(e) {
    // 你的错误处理逻辑
  }
});

2. 确认Ionic Storage的初始化是否正确 #

Ionic Storage v3及以上版本需要先初始化才能使用，你得确保：

• 在AppModule里正确导入并配置：

import { IonicStorageModule } from '@ionic/storage-angular';

@NgModule({
  imports: [
    // 其他模块导入
    IonicStorageModule.forRoot() // 别忘了加forRoot()
  ]
})
export class AppModule {}

• 在你的组件里，先调用create()方法初始化存储（比如在ngOnInit里）：

async ngOnInit() {
  await this.store.create(); // 必须先初始化
}

3. 检查浏览器里的存储位置 #

Ionic Storage在浏览器环境下默认用IndexedDB存储，而不是你看的localStorage！你可以打开Chrome开发者工具，切换到Application面板，找到IndexedDB -> _ionicstorage，看看里面有没有你存的token数据。

4. 验证cordova-plugin-http是否在浏览器平台正常工作 #

有些Cordova插件对browser平台的支持不好，你可以打开Chrome的Console面板，看看有没有类似cordova.plugin.http is undefined的报错。如果有，说明插件没在浏览器环境下正确加载，这时候可以考虑临时用Angular的HttpClient代替，或者检查插件是否支持browser平台。

另外，你可以在存储之后加个验证代码，看看是否真的存储成功：

this.store.set('token', JSON.stringify(response.data.token)).then(() => {
  this.store.get('token').then(savedToken => {
    console.log('已存储的token:', savedToken); // 在Console里看输出
  });
});

内容的提问来源于stack exchange，提问作者Lee Merlas