React Native与Web集成时AsyncStorage失效，求跨端Token本地存储方案

方案1：封装统一存储适配层 #

在X-sdk内部封装跨端存储抽象层，根据运行环境自动切换存储实现，对外暴露统一的Token操作接口：

• React Native环境：使用官方推荐的@react-native-async-storage/async-storage
• Web环境：调用浏览器原生localStorage（或sessionStorage，按需选择）

示例代码：

class CrossPlatformStorage {
  constructor() {
    this.storage = this._getStorageAdapter();
  }

  _getStorageAdapter() {
    // 判断运行环境
    if (typeof window === 'undefined') {
      // React Native 环境
      const AsyncStorage = require('@react-native-async-storage/async-storage').default;
      return AsyncStorage;
    } else {
      // Web 环境，适配Promise风格接口
      return {
        getItem: (key) => Promise.resolve(localStorage.getItem(key)),
        setItem: (key, value) => {
          localStorage.setItem(key, value);
          return Promise.resolve();
        },
        removeItem: (key) => {
          localStorage.removeItem(key);
          return Promise.resolve();
        }
      };
    }
  }

  // 统一的Token操作方法
  async saveToken(token) {
    await this.storage.setItem('auth_token', token);
  }

  async getToken() {
    return await this.storage.getItem('auth_token');
  }

  async clearToken() {
    await this.storage.removeItem('auth_token');
  }
}

// 在X-sdk中实例化使用
const storage = new CrossPlatformStorage();

方案2：利用跨端状态管理工具的持久化能力 #

如果项目已接入跨端状态管理库，可直接复用其内置的持久化功能：

• Redux Persist：支持React Native和Web，可配置不同环境的存储引擎（RN用asyncStorage，Web用localStorage）
• Zustand + persist中间件：轻量状态库，支持自定义存储适配器

以Redux Persist为例的核心配置：

import { persistStore, persistReducer } from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';
import webStorage from 'redux-persist/lib/storage'; // Web端默认适配localStorage

const persistConfig = {
  key: 'auth-store',
  storage: typeof window === 'undefined' ? AsyncStorage : webStorage,
  whitelist: ['token'] // 仅持久化Token字段
};

// 将auth模块的reducer包装后接入Redux即可

方案3：极简环境判断适配 #

若不想引入额外依赖，可直接在X-sdk的Token逻辑中做环境分支判断：

async function saveToken(token) {
  if (typeof window === 'undefined') {
    // React Native
    const AsyncStorage = require('@react-native-async-storage/async-storage').default;
    await AsyncStorage.setItem('auth_token', token);
  } else {
    // Web
    localStorage.setItem('auth_token', token);
  }
}

async function getToken() {
  if (typeof window === 'undefined') {
    const AsyncStorage = require('@react-native-async-storage/async-storage').default;
    return await AsyncStorage.getItem('auth_token');
  } else {
    return localStorage.getItem('auth_token');
  }
}

注意事项 #

• React Native项目需确保@react-native-async-storage/async-storage已正确安装，Web端无需安装该包（动态引入不会触发报错）
• Web端使用localStorage时需注意同源策略限制，跨域场景需配合后端Cookie方案或其他跨域存储机制
• 敏感Token建议先加密再存储，降低两端数据泄露风险

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