如何存储多账号下带不同过期时间的OAuth2 refresh token列表？

方案1：拆分单个cookie为账号关联的独立cookie（最贴合现有需求的方案） #

你的核心问题是将所有refresh token打包存在同一个cookie中，天然无法单独为每个token设置过期时间，直接按账号ID拆分存储即可解决：

• cookie命名规则固定为refresh_token_{accountId}，比如refresh_token_xxxx、refresh_token_qqqq，每个cookie对应一个账号的refresh token，可以单独设置过期时间、单独删除，互不影响。
• 改造后的设置逻辑示例：

const setRefreshToken = (token, accountId, expireDays = 2) => {
  // 直接操作对应账号的独立cookie，无需读取数组做合并处理
  setCookie(`refresh_token_${accountId}`, token, expireDays);
};

• 获取指定账号refresh token逻辑：

const getRefreshToken = (accountId) => {
  return getCookie(`refresh_token_${accountId}`);
};

• 登出指定账号的清理逻辑：

const removeRefreshToken = (accountId) => {
  deleteCookie(`refresh_token_${accountId}`);
};

注意：refresh token属于敏感凭据，存储时务必给cookie开启HttpOnly、Secure、SameSite=Strict属性，避免XSS、CSRF攻击。开启HttpOnly后前端JS无法读写cookie，需要登录/刷新接口由服务端直接操作对应cookie，安全性更高。

其他可选存储方案 #

方案2：LocalStorage存储+自行管理过期时间 #

如果你的应用不需要服务端读取refresh token、刷新逻辑完全由前端触发，可以在存储refresh token时同步存入过期时间戳，读取时自行过滤过期条目：

• 存储结构示例：

const refreshTokensList = [
  { accountId: 'xxxx', refreshToken: 'yyyy', expireAt: 1735689600000 },
  { accountId: 'qqqq', refreshToken: 'rrrr', expireAt: 173577600000 }
]

• 读取时自动过滤过期条目：

const getValidRefreshTokens = () => {
  const list = JSON.parse(localStorage.getItem('refreshTokensList') || '[]')
  const now = Date.now()
  // 过滤掉已过期的token
  const validList = list.filter(item => item.expireAt > now)
  // 回写过滤后的结果到localStorage，自动清理过期数据
  localStorage.setItem('refreshTokensList', JSON.stringify(validList))
  return validList
}

该方案缺点是LocalStorage容易被XSS攻击窃取，只适合安全要求不高的内部系统，且服务端无法直接读取token。

方案3：IndexedDB存储 #

如果账号量很大、需要存储的附加数据多，可以用浏览器内置的IndexedDB存储，支持异步操作、大容量结构化存储，你可以自行实现每个条目的过期清理逻辑，适合多账号场景下大量凭据的存储，缺点是API相对复杂，且同样存在前端可读取的安全问题、服务端无法获取。

• 如果你的刷新逻辑需要服务端参与（比如接口自动续期），优先选拆分独立Cookie的方案，安全性最高。
• 如果是纯前端SPA、刷新逻辑完全由前端控制，账号量级小可选LocalStorage方案，账号量级大可选IndexedDB方案。

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