React Native WebView中localStorage.setItem不生效问题求助

1. 开启Android WebView的存储权限 #

Android 9默认限制了WebView的DOM存储访问，必须显式开启相关配置，给WebView添加以下属性：

<WebView
  startInLoadingState={true}
  source={{ uri:'xxxxxx' }}
  injectedJavaScriptBeforeContentLoaded={runFirst}
  onMessage={(event) => {}}
  style={{width:screenWidth, height:screenHeight}}
  // 新增存储权限配置
  androidSettings={{
    domStorageEnabled: true, // 核心：启用DOM存储
    databaseEnabled: true,
    allowFileAccess: true,
    allowContentAccess: true,
  }}
/>

2. 用try-catch捕获注入代码的异常 #

页面空白大概率是localStorage写入代码抛出了未捕获的错误，给注入逻辑套个异常捕获，还能直观看到错误信息：

const runFirst = `
  try {
    window.localStorage.setItem('api_token', 'zzz');
    window.localStorage.setItem('auth_roles', 'zzz');
    window.localStorage.setItem('auth_permissions', 'zzz');
    console.log('LocalStorage写入成功');
  } catch (e) {
    console.error('LocalStorage写入失败:', e);
    window.alert('出错了：' + e.message);
  }
  setTimeout(function() { window.alert('hi') }, 1000);
  true;
`;

还可以添加日志回调查看WebView内部的报错详情：

onConsoleMessage={(message) => {
  console.log('WebView日志:', message.message);
}}

3. 调整注入时机 #

injectedJavaScriptBeforeContentLoaded的执行时机可能过早，此时localStorage还未完成初始化，试试把代码包裹在DOM就绪事件中：

const runFirst = `
  document.addEventListener('DOMContentLoaded', function() {
    try {
      window.localStorage.setItem('api_token', 'zzz');
      window.localStorage.setItem('auth_roles', 'zzz');
      window.localStorage.setItem('auth_permissions', 'zzz');
    } catch (e) {
      console.error(e);
    }
  });
  setTimeout(function() { window.alert('hi') }, 1000);
  true;
`;

如果还是不行，可以临时换成injectedJavaScript属性（页面加载完成后注入），先确认存储逻辑本身没有问题。

4. 排查目标页面的CSP限制 #

如果目标页面设置了严格的内容安全策略（CSP），可能会阻止localStorage写入。可以先把目标地址换成示例中的github页面测试，排除页面本身的限制问题。

5. 升级react-native-webview版本 #

你当前使用的13.6.2版本在Android 9上可能存在兼容bug，试试升级到适配RN 0.71的最新稳定版本（比如13.8.6）：

npm install react-native-webview@^13.8.6 --save

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