如何使用Vue.js实现localStorage多用户独立存储多步骤表单值

• 核心问题是你使用了固定key model 读写localStorage，localStorage是当前域名下全局共享的本地存储，不会区分登录账号，所有账号登录后都会读写同一份数据，自然会出现跨账号展示历史表单内容的问题。
• 附带的语法问题：你当前代码里把存localStorage的语句直接写在methods字段里，不符合Vue的语法规范，这段代码实际上不会正常触发执行，你能存值应该是其他地方有额外的存值逻辑。

1. 首先给localStorage的key加上当前登录用户的唯一标识（比如用户ID、唯一邮箱等，登录后可以从登录态里拿到这个值），不同用户对应不同的存储key，互不干扰。
2. 增加用户切换登录的监听逻辑，切换账号后立即重新读取对应当前账号的表单存储值，没有存储过就默认给空对象。
3. 修复存值逻辑的写法，推荐用watch监听model的变化自动同步到localStorage，不需要手动触发。

模板部分：

<vue-form-g :schema="schema_Antiques" :model="model" :options="formOptions"></vue-form-g>

Vue实例部分：

new Vue({
  el: '#q-vikreya',
  components: {
    "vue-form-g": VueFormGenerator.component
  },
  data() {
    return {
      model: {},
      // 登录后赋值为当前用户的唯一标识，比如用户ID、绑定的邮箱等
      currentUserId: '',
      schema_Antiques: {
        fields: [{
          type: "input",
          inputType: "text",
          placeholder: "Type",
          model: "Type",
          styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
        }, {
          type: "input",
          inputType: "text",
          placeholder: "Origin",
          required: true,
          model: "Origin",
          styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
        }, {
          type: "input",
          inputType: "text",
          placeholder: "Age",
          required: true,
          model: "Age",
          styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
        }, {
          type: "input",
          inputType: "text",
          placeholder: "Condition",
          required: true,
          model: "Condition",
          styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
        }, {
          type: "input",
          inputType: "text",
          placeholder: "Size",
          required: true,
          model: "Size",
          styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
        }, {
          type: "input",
          inputType: "text",
          placeholder: "Maker",
          required: true,
          model: "Maker",
          styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
        }, {
          type: "input",
          inputType: "text",
          placeholder: "Material",
          required: true,
          model: "Material",
          styleClasses: ["half-width col-xs-12 col-sm-4", "job_title"]
        }, {
          type: "textArea",
          model: "Other_specializations",
          max: 500,
          placeholder: "Other specializations",
          styleClasses: ["half-width col-xs-12 col-sm-4", "Experience"]
        }]
      }
    }
  },
  mounted() {
    // 读取当前用户对应的存储值
    const userModelKey = `model_${this.currentUserId}`
    const savedModel = localStorage.getItem(userModelKey)
    if (savedModel) {
      this.model = JSON.parse(savedModel)
    } else {
      this.model = {}
    }
  },
  watch: {
    // 监听model变化自动存到对应用户的key下
    model: {
      deep: true,
      handler(newVal) {
        const userModelKey = `model_${this.currentUserId}`
        localStorage.setItem(userModelKey, JSON.stringify(newVal))
      }
    }
  },
  methods: {
    // 其他业务方法
  }
})

• 如果用户退出登录，你可以选择保留对应账号的存储数据，也可以主动清空避免数据残留，根据你的业务需求来即可。
• 如果是涉及敏感信息的表单内容，不建议存到localStorage，避免被其他拿到设备的人读取。

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