如何通过Cookie存储连接信息实现Web3钱包（WalletConnect/client）连接？

你不需要序列化整个connector对象（它包含不可序列化的函数和内部状态），只需要提取可序列化的核心标识信息存入Cookie，后续通过这些信息重新初始化连接即可。以下是具体实现方案：

一、连接成功后提取并存储关键信息 #

连接钱包成功后，从connector中提取可以安全序列化的字段（比如钱包类型、链ID、账户地址等），转换成JSON字符串存入Cookie：

// 连接成功后执行
async function saveConnectionInfo(connector) {
  const walletType = connector.name; // 或手动指定，如'MetaMask'/'WalletConnect'
  const chainId = await connector.getChainId();
  const accounts = await connector.getAccounts();
  
  // 整理可序列化的连接信息
  const connectionData = {
    walletType,
    chainId,
    account: accounts[0]
  };

  // 存入Cookie（设置有效期为1天，可按需调整）
  document.cookie = `web3Conn=${JSON.stringify(connectionData)}; path=/; max-age=86400; SameSite=Lax`;
}

如果是WalletConnect，还可以存储其session的可序列化部分（因为WalletConnect依赖会话信息恢复连接）：

// WalletConnect专属存储逻辑
async function saveWalletConnectSession(connector) {
  const session = connector.walletConnectProvider.session;
  const sessionData = {
    walletType: 'WalletConnect',
    chainId: session.chainId,
    accounts: session.accounts,
    topic: session.topic,
    peerId: session.peerId,
    peerMeta: session.peerMeta
  };

  document.cookie = `web3Conn=${JSON.stringify(sessionData)}; path=/; max-age=86400; SameSite=Lax`;
}

二、页面加载时恢复连接 #

读取Cookie中的信息，根据钱包类型重新初始化对应的connector，并尝试恢复连接：

async function restoreWeb3Connection() {
  // 从Cookie中读取存储的连接信息
  const cookieEntry = document.cookie.split('; ').find(row => row.startsWith('web3Conn='));
  if (!cookieEntry) return;

  const savedData = JSON.parse(cookieEntry.split('=')[1]);
  let connector;

  // 根据钱包类型初始化对应的connector
  switch (savedData.walletType) {
    case 'MetaMask':
      connector = new MetaMaskConnector({
        // 你的MetaMask配置项，如supportedChainIds等
      });
      break;
    case 'WalletConnect':
      connector = new WalletConnectConnector({
        session: savedData, // 直接传入存储的session数据
        // 其他WalletConnect配置项
      });
      break;
    // 支持更多钱包类型
    default:
      console.log('Unsupported wallet type');
      return;
  }

  try {
    // 尝试激活连接
    await connector.activate(savedData.chainId);
    
    // 验证当前账户与存储的是否一致
    const currentAccounts = await connector.getAccounts();
    if (currentAccounts[0] !== savedData.account) {
      console.log('账户不匹配，请重新连接');
      // 清除无效Cookie
      document.cookie = 'web3Conn=; path=/; max-age=0';
    }
  } catch (err) {
    console.log('恢复连接失败:', err);
    // 清除无效Cookie
    document.cookie = 'web3Conn=; path=/; max-age=0';
  }
}

// 页面加载时调用
window.addEventListener('load', restoreWeb3Connection);

三、关键注意事项 #

• Cookie大小限制：Cookie最大约4KB，只存必要的标识信息，不要存储冗余数据。
• 安全风险：绝对不要在Cookie中存储私钥、助记词等敏感信息，只存公开的链ID、账户地址、钱包类型等非敏感数据。
• 钱包差异：不同钱包的恢复逻辑略有不同，比如Coinbase Wallet可以参考MetaMask的方式，而WalletConnect需要依赖session数据，需针对性处理。

内容的提问来源于stack exchange，提问作者寺元一耕