如何阻止React Native Webview自动清除站点会话/cookie

默认情况下React Native的Webview组件每次新建实例时若未开启持久化存储配置，或不同实例之间未共享cookie存储域，就会出现切换店铺后前序站点会话自动丢失的问题。

• 复用Webview实例
  不要每次点击店铺入口都销毁重建Webview，可通过单例模式维护全局唯一的Webview实例，切换店铺时仅修改source属性加载对应站点，避免实例销毁触发的存储自动清除。
• 开启Webview持久化存储配置
  以常用的react-native-webview组件为例，需显式开启以下存储相关属性：

  import WebView from 'react-native-webview'
  
  <WebView
    source={{ uri: currentShopUrl }}
    sharedCookiesEnabled={true} // 开启跨Webview实例的cookie共享，iOS/Android通用
    thirdPartyCookiesEnabled={true} // 安卓端必须开启，允许第三方域名cookie存储
    domStorageEnabled={true} // 开启DOM存储，避免localStorage/sessionStorage内容丢失
    cacheEnabled={true} // 开启资源缓存
    // 禁止添加clearCache、clearCookies这类每次页面加载都会触发清除的属性
  />
  

• 独立管理全局Cookie
  如果三个站点为不同域名，可借助@react-native-cookies/cookies库全局维护所有站点的cookie：每次Webview加载站点前注入对应域名的本地存储cookie，页面加载完成后同步最新的cookie回本地存储，完全自主控制cookie生命周期，不依赖Webview默认存储逻辑。

• 监听支付成功回调
  优先通过onMessage方法监听H5站点主动发送的支付成功通知，收到通知后再执行清除操作：

  const webviewRef = useRef(null)
  
  const handleMessage = (event) => {
    const eventData = JSON.parse(event.nativeEvent.data)
    // 匹配H5约定的支付成功消息类型
    if (eventData.eventType === 'PAYMENT_SUCCESS') {
      clearAllWebviewStorage()
    }
  }
  
  <WebView
    ref={webviewRef}
    onMessage={handleMessage}
    // 其他存储相关配置同上
  />
  

• 拦截跳转链接匹配支付成功页
  若H5侧无法配合发送postMessage，可在Webview的onNavigationStateChange回调中拦截跳转url，匹配到支付成功回调页的路径规则后自动触发清除操作。
• 完整清除逻辑示例

  import CookieManager from '@react-native-cookies/cookies'
  
  const clearAllWebviewStorage = async () => {
    // 清除所有域名cookie
    await CookieManager.clearAll()
    // 清除Webview侧缓存、存储、历史记录
    webviewRef.current?.clearCache(true)
    webviewRef.current?.clearCookies()
    webviewRef.current?.clearHistory()
  }
  

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