同一用户个人/商务账号切换时localStorage表单数据隔离方案咨询

核心思路是给localStorage的存储key增加当前登录身份的唯一前缀，实现不同身份的数据隔离，具体修改如下：

第一步：存储当前登录身份标识 #

用户登录成功后，将后端返回的身份类型（个人账号对应personal，商务账号对应business，建议同时拼接用户唯一ID避免多用户同身份串数据）存储到本地，示例代码：

// 登录成功后执行，userId为用户唯一标识，identity为返回的身份类型：personal/business
localStorage.setItem('currentUserIdentity', `${userId}_${identity}`)

第二步：改造localStorage读写逻辑 #

把原来固定的model存储key，替换为带当前身份前缀的动态key：

// 先获取当前身份标识
const currentIdentity = localStorage.getItem('currentUserIdentity')
const storageKey = currentIdentity ? `${currentIdentity}_model` : 'public_model' // 未登录状态可以用公共key，按需调整

// 加载表单数据逻辑
if(localStorage.getItem(storageKey) !== null) {
  this.model = JSON.parse(localStorage.getItem(storageKey))
} else {
  this.model = {} // 切换身份后没有对应数据时重置为空，避免加载旧身份数据
}

// 保存表单数据逻辑
localStorage.setItem(storageKey, JSON.stringify(this.model))

可选优化：身份切换时主动重置数据 #

如果有明确的身份切换触发入口，可以在切换时主动重置当前表单数据，加载新身份对应的存储内容：

// 身份切换回调逻辑
function onIdentityChange(newIdentity) {
  localStorage.setItem('currentUserIdentity', newIdentity)
  // 重置表单并加载新身份数据
  const newStorageKey = `${newIdentity}_model`
  this.model = localStorage.getItem(newStorageKey) ? JSON.parse(localStorage.getItem(newStorageKey)) : {}
}

修改完成后，个人账号和商务账号的表单数据会存储在不同的key下，切换身份时不会互相读取到对方的存储内容，完全满足业务隔离要求。

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