在Chrome中测试Ionic 3应用时IonicStorage数据丢失问题

这个问题我碰到过好多次，其实核心是开发环境下热重载的存储驱动特性和代码里的小细节导致的，咱们一步步来解决：

一、核心原因：热重载时内存存储被重置 #

新版Ionic Storage在开发模式（比如ionic serve）下，默认会优先使用内存存储驱动（MemoryDriver），而不是持久化的LocalStorage或SQLite。当你修改代码触发热重载时，应用的JavaScript上下文会被重启，内存里的存储数据自然就被清空了，这就是你觉得数据"被完全清除"的原因。

而你第一次运行时能正常获取，是因为数据还在当前内存上下文里，重载后上下文重置，内存存储就空了。

二、解决办法 #

1. 强制配置持久化存储驱动 #

修改你的Ionic Storage初始化代码，强制指定使用LocalStorage或者SQLite作为存储驱动，这样数据就会存在浏览器的本地存储里，不会因为热重载丢失。

在app.module.ts里，配置IonicStorageModule的时候添加驱动优先级：

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

@NgModule({
  ...
  imports: [
    ...
    IonicStorageModule.forRoot({
      name: '__mydb',
      driverOrder: ['localstorage', 'sqlite', 'indexeddb'] // 把localstorage放在最前面，优先使用
    })
  ]
})
export class AppModule {}

这样配置后，即使热重载，数据也会存在浏览器的LocalStorage里，重载后依然能读取到。

2. 修复getToken方法的异步返回问题 #

你的getToken方法现在有个小问题：它没有返回整个Promise链，导致调用这个方法的时候可能无法正确获取到异步返回的token值。修改成这样：

getToken() {
  return this.storage.get('bearertoken'); // 直接返回Promise，调用方用then或者async/await处理
}

之前的写法里，你在then里返回了val，但整个getToken方法没有返回Promise，所以外部调用的时候拿不到正确的值。虽然这可能不是热重载后为空的直接原因，但会导致你获取token的逻辑出现问题，一起修复掉更稳妥。

三、验证方法 #

修改完配置后，你可以打开浏览器的开发者工具（F12），进入Application -> LocalStorage，看看有没有__mydb相关的存储项，存完token后这里能看到数据，热重载后再检查，数据依然存在，这时候调用getToken就能拿到值了。

内容的提问来源于stack exchange，提问作者Indy-Jones