如何基于网站其他页面的用户角色数据展示对应表单

这个需求完全可以实现，不需要复杂技术栈，纯前端基础API就能搞定，学习成本和开发成本都很低。

核心思路是用浏览器自带的localStorage做跨页面的角色状态持久化，分两步实现：

• 首次访问角色选择逻辑
  1. 全站页面加载时统一执行检查逻辑，通过localStorage.getItem('userRole')读取本地存储的用户角色值
  2. 如果读取结果为空，直接弹出角色选择遮罩层，阻断用户操作，提供「买家」「卖家」「代理」三个可选项，选项的value分别对应buyer/seller/agent
  3. 用户点击任意选项后，执行localStorage.setItem('userRole', 选中项的value)把角色存到本地，之后隐藏选择层，用户即可正常浏览
• 联系页表单匹配逻辑
  1. 提前把三个角色对应的三套表单写在联系页的HTML结构里，默认给所有表单加display: none样式隐藏，分别给三个表单加标识类名：.form-buyer、.form-seller、.form-agent
  2. 联系页加载时读取本地存储的userRole值，匹配到对应角色的表单元素，把它的display属性修改为block展示即可，其余表单保持隐藏状态

• 若用户直接跳过首页访问联系页，本地没有存过角色值，直接在联系页弹出角色选择层即可，不需要强制跳转回首页，选完直接展示对应表单
• 可以在网站边角位置加个不起眼的「切换角色」入口，用户点击后重新唤起选择层，更新本地存储的角色值就行，不需要用户手动清缓存换身份
• 不需要给表单做动态拼接渲染，提前写死三个表单做显隐控制就行，逻辑更简单，不容易出JS报错，也方便后续改表单字段

• 零后端依赖，不需要接口、数据库支持，纯前端就能跑通全流程
• 兼容性拉满，localStorage支持所有主流浏览器，没有适配坑
• 逻辑简单，代码量极小，刚接触JS也能在1小时内写完调通，后续维护成本低
• 因为是页面加载初期就执行显隐判断，不会出现多个表单闪烁的问题，用户体验流畅

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