React Native 如何实现用户退出登录时清除应用缓存的功能

1. 前端Web端实现 #

• 清除浏览器存储类缓存：
  • 本地存储：执行localStorage.clear()可以清空当前域名下所有localStorage内容，如果你只需要清理用户身份相关的缓存，也可以指定key删除，比如localStorage.removeItem('userAuthToken')
  • 会话存储：执行sessionStorage.clear()清空当前会话级别的存储内容
  • Cookie：删除Cookie需要将过期时间设置为过去的时间，示例代码如下：

    document.cookie.split(";").forEach(cookieItem => {
      const eqIndex = cookieItem.indexOf("=");
      const cookieName = eqIndex > -1 ? cookieItem.substr(0, eqIndex) : cookieItem;
      document.cookie = cookieName + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";
    })
    

• 清除应用运行时缓存：
  • Vue/React等单页应用需要清空Pinia/Vuex/Redux等状态管理库中的用户相关状态，重置为初始值
  • 内存中的缓存数据，比如axios等请求库的缓存、自定义的全局缓存变量要同步清空
• 清除静态资源缓存（可选）：如果登出后需要强制加载最新版本的应用资源，可以调用location.reload(true)绕过浏览器缓存重新加载页面

2. 安卓端实现 #

• 清除应用内存储缓存：
  • 清除SharedPreferences内容：

    getSharedPreferences("app_config", MODE_PRIVATE).edit().clear().apply()
    

  • 清空应用缓存目录：

    // 清除内部缓存目录
    cacheDir.deleteRecursively()
    // 有存储权限时可以同步清除外部缓存目录
    externalCacheDir?.deleteRecursively()
    

  • 清空Room等本地数据库的用户关联表数据，或者直接删除对应数据库文件

3. iOS端实现 #

• 清除UserDefaults存储：

  if let bundleID = Bundle.main.bundleIdentifier {
      UserDefaults.standard.removePersistentDomain(forName: bundleID)
  }
  

• 清除沙盒缓存目录内容：

  let cachePath = NSSearchPathForDirectoriesInDomains(.cachesDirectory, .userDomainMask, true)[0]
  try? FileManager.default.removeItem(atPath: cachePath)
  

• 清空Core Data等本地持久化存储的用户相关数据

注意事项 #

不要盲目全量清除所有缓存，建议提前梳理清楚缓存类型，和用户身份绑定的业务缓存随登出清除，公共缓存（比如全局配置、不涉及用户身份的静态资源缓存）可以保留，避免无意义的资源重复加载影响用户体验
清除缓存的操作要放在登出接口调用成功之后执行，避免接口还未返回就清空缓存，导致登出请求失败无法正常回滚的异常
如果业务有离线缓存数据，建议登出前提示用户，避免未备份的离线数据丢失

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