React Native Async Storage在Web端遇到的"window未定义"问题解析

问题背景

在使用React Native Async Storage库的Web版本时，开发者经常会遇到一个典型的运行时错误："ReferenceError: window is not defined"。这个错误发生在尝试访问浏览器环境下的window对象时，表明代码在非浏览器环境中执行。

问题根源分析

该问题的本质在于React Native Async Storage库在Web环境下直接引用了window.localStorage，而没有进行环境检测。当代码在服务器端渲染(SSR)或某些非浏览器环境中运行时，window对象并不存在，导致引用错误。

技术解决方案

1. 环境检测方案

最稳健的解决方案是在访问浏览器API前进行环境检测。可以通过以下方式实现：

function getStorageItem(key) {
  if (typeof window !== 'undefined' && window.localStorage) {
    return window.localStorage.getItem(key);
  }
  // 处理非浏览器环境
  return null;
}

2. 平台区分方案

对于跨平台应用，可以结合React Native的Platform API进行更精确的控制：

import { Platform } from 'react-native';

class CrossPlatformStorage {
  async getItem(key) {
    if (Platform.OS === 'web') {
      return typeof localStorage !== 'undefined' 
        ? localStorage.getItem(key) 
        : null;
    }
    return AsyncStorage.getItem(key);
  }
  
  // 其他方法实现类似
}

3. 构建时解决方案

对于现代前端项目，可以通过构建工具配置来区分客户端和服务端代码。例如使用Webpack的target配置或Next.js的动态导入功能，确保浏览器相关代码只在客户端执行。

最佳实践建议

1. 防御性编程：所有浏览器API调用都应该进行存在性检查
2. 环境隔离：将平台相关代码集中管理，避免分散在各处
3. 统一接口：设计统一的存储接口，隐藏平台实现细节
4. 错误处理：为不同环境提供合理的fallback方案

进阶思考

这个问题实际上反映了跨平台开发中的一个核心挑战：如何优雅地处理平台差异。React Native生态中的许多库都会面临类似的兼容性问题。开发者需要建立"平台思维"，在架构设计阶段就考虑多平台支持，而不是简单地将移动端逻辑直接移植到Web端。

通过采用适配器模式或策略模式，可以创建更灵活、更易维护的跨平台代码结构，避免硬编码的平台检测逻辑分散在整个代码库中。