如何通过代码清除基于Expo的React Native应用全部数据？

1. 清除AsyncStorage数据 #

即使不知道存储的密钥，也可以直接清空所有键值对：

import AsyncStorage from '@react-native-async-storage/async-storage';

const clearAsyncStorage = async () => {
  try {
    await AsyncStorage.clear();
    console.log('AsyncStorage数据已清空');
  } catch (e) {
    console.error('清空AsyncStorage失败:', e);
  }
};

2. 清除WebView的所有存储 #

针对Expo的WebView组件，需要注入脚本清除前端存储，同时清理WebView缓存：

import { WebView } from 'react-native-webview';
import * as WebBrowser from 'expo-web-browser';

// 注入脚本清除WebView内的LocalStorage、SessionStorage、IndexedDB
const clearWebViewStorage = (webViewRef) => {
  if (webViewRef.current) {
    const clearScript = `
      window.localStorage.clear();
      window.sessionStorage.clear();
      indexedDB.databases().then(databases => {
        databases.forEach(db => indexedDB.deleteDatabase(db.name));
      });
      true;
    `;
    webViewRef.current.injectJavaScript(clearScript);
  }
};

// 清除WebView的缓存
const clearWebViewCache = async () => {
  try {
    await WebBrowser.clearCacheAsync();
    console.log('WebView缓存已清空');
  } catch (e) {
    console.error('清空WebView缓存失败:', e);
  }
};

注：需给WebView组件添加ref，才能调用injectJavaScript方法。

3. 清除Expo SecureStore数据 #

如果使用了expo-secure-store存储敏感数据，可批量清空所有条目：

import * as SecureStore from 'expo-secure-store';

const clearSecureStore = async () => {
  try {
    const keys = await SecureStore.getAllKeysAsync();
    await Promise.all(keys.map(key => SecureStore.deleteItemAsync(key)));
    console.log('SecureStore数据已清空');
  } catch (e) {
    console.error('清空SecureStore失败:', e);
  }
};

4. 清除应用文件系统数据 #

若用expo-file-system存储了文件，需删除应用专属的文档和缓存目录：

import * as FileSystem from 'expo-file-system';

const clearAppFileSystem = async () => {
  try {
    const docDir = FileSystem.documentDirectory;
    const cacheDir = FileSystem.cacheDirectory;
    
    await FileSystem.deleteAsync(docDir, { idempotent: true });
    await FileSystem.deleteAsync(cacheDir, { idempotent: true });
    console.log('文件系统数据已清空');
  } catch (e) {
    console.error('清空文件系统失败:', e);
  }
};

5. 整合所有操作到按钮点击事件 #

把上述方法整合，在按钮点击时执行全量清除，可选重启应用确保状态重置：

import React, { useRef } from 'react';
import { Button } from 'react-native';
import * as Updates from 'expo-updates';

export default function ClearDataButton() {
  const webViewRef = useRef(null);

  const handleClearAllData = async () => {
    await clearAsyncStorage();
    clearWebViewStorage(webViewRef);
    await clearWebViewCache();
    await clearSecureStore();
    await clearAppFileSystem();
    // 重启应用，彻底重置内存状态
    await Updates.reloadAsync();
  };

  return (
    <Button title="清除全部数据" onPress={handleClearAllData} />
  );
}

注意事项 #

• 部分文件系统操作需要权限，确保在app.json中配置了对应权限。
• 删除文件时仅操作应用专属目录，避免误删系统文件。

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