vue.js - 本地存储输入字段显示未定义值

Question

这里我使用的是 vue.js。在 vue.js 中，我使用本地存储将用户输入的值临时存储在表单字段中。所以这里一切正常，但问题是虽然我在表单字段中没有任何价值，但它给出的未定义为占位符。所以我哪里出错了，请告诉我。以下是我的代码/

schema_Real_Estate: {
            fields: [{
                type: "input",
                inputType: "text",
                placeholder: "Garages",
                required: true,
                model: "Garages",
                styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Basement",
                required: true,
                model: "Basement",
                styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Roof",
                required: true,
                model: "Roof",
                styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Exterior",
                required: true,
                model: "Exterior",
                styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Cooling",
                required: true,
                model: "Cooling",
                styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Heating",
                required: true,
                model: "Heating",
                styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Elementary school",
                required: true,
                model: "Elementary_school",
                styleClasses: ["half-width col-xs-12 col-sm-4", "job_title"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Middle school",
                required: true,
                model: "Middle_school",
                styleClasses: ["half-width col-xs-12 col-sm-4", "Experience"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "High school",
                required: true,
                min: '',
                model: "High_school",
                styleClasses: ["half-width col-xs-12 col-sm-4", "job_title"]
            }]
        },

if (localStorage.Garages) {
      this.model.Garages = localStorage.Garages;
    }
    if (localStorage.Roof) {
      this.model.Roof = localStorage.Roof;
    }
    if (localStorage.Exterior) {
      this.model.Exterior = localStorage.Exterior;
    }
    if (localStorage.Cooling) {
      this.model.Cooling = localStorage.Cooling;
    }
    if (localStorage.Heating) {
      this.model.Heating = localStorage.Heating;
    }
    if (localStorage.Elementary_school) {
      this.model.Elementary_school = localStorage.Elementary_school;
    }
    if (localStorage.Middle_school) {
      this.model.Middle_school = localStorage.Middle_school;
    }
    if (localStorage.High_school) {
      this.model.High_school = localStorage.High_school;
    }
    if (localStorage.Make) {
      this.model.Make = localStorage.Make;
    }
    if (localStorage.Model) {
      this.model.Model = localStorage.Model;
    }
    if (localStorage.Year) {
      this.model.Year = localStorage.Year;
    }
    if (localStorage.Capacity) {
      this.model.Capacity = localStorage.Capacity;
    }
    if (localStorage.Color) {
      this.model.Color = localStorage.Color;
    }
    if (localStorage.Type) {
      this.model.Type = localStorage.Type;
    }
    if (localStorage.Condition) {
      this.model.Condition = localStorage.Condition;
    }
    if (localStorage.Other_spec) {
      this.model.Other_spec = localStorage.Other_spec;
    }
    if (localStorage.Name) {
      this.model.Name = localStorage.Name;
    }
    if (localStorage.Breed) {
      this.model.Breed = localStorage.Breed;
    }
    if (localStorage.Gender) {
      this.model.Gender = localStorage.Gender;
    }
    if (localStorage.Age) {
      this.model.Age = localStorage.Age;
    }
    if (localStorage.Trained) {
      this.model.Trained = localStorage.Trained;
    }
    if (localStorage.Other_details) {
      this.model.Other_details = localStorage.Other_details;
    }

  },

localStorage.Garages = this.model.Garages;
      localStorage.Roof = this.model.Roof;
      localStorage.Exterior = this.model.Exterior;
      localStorage.Cooling = this.model.Cooling;
      localStorage.Heating = this.model.Heating;
      localStorage.Elementary_school = this.model.Elementary_school;
      localStorage.Middle_school = this.model.Middle_school;
      localStorage.High_school = this.model.High_school;
      localStorage.Make = this.model.Make;
      localStorage.Model = this.model.Model;
      localStorage.Year = this.model.Year;
      localStorage.Capacity = this.model.Capacity;
      localStorage.Color = this.model.Color;
      localStorage.Type = this.model.Type;
      localStorage.Condition = this.model.Condition;
      localStorage.Other_spec = this.model.Other_spec;
      localStorage.Name = this.model.Name;
      localStorage.Breed = this.model.Breed;
      localStorage.Gender = this.model.Gender;
      localStorage.Age = this.model.Age;
      localStorage.Trained = this.model.Trained;
      localStorage.Other_details = this.model.Other_details;

标签： vue.js

Answer 1

首先，您使用 localStorage 错误。查看localStorage的官方文档。

要设置键值对，您可以使用：

localStorage.setItem('my_key', 'value to my key (must be string)');

要从 localStorage 中检索值，请使用：

var myValue = localStorage.getItem('my_key');
// also make sure its not null
if(myValue === null) console.log('is null');

要从 localStorage 中删除项目，请使用：

localStorage.removeItem('my_key');

因此，您的一个 if 语句将如下所示：

let name = localStorage.getItem('Name');
if (name !== null) {
      this.model.Name = name;
} else {
      // If localStorage key "Name" is undefined we default the name to an empty string.
      this.model.Name = '';
}

要在 localStorage 中设置值，请使用：

localStorage.setItem('Name', this.model.Name);

另外，我不确定将值存储在 localStorage 中的最佳方式。我相信会有一个解决方案将它们存储在内存中（例如this.model）。否则，如果您必须在路由之间切换，请考虑使用状态管理系统vuex。

编辑 此外，如果您必须使用 localStorage，请考虑仅 JSON.stringify 整个模型，而不是单独的每个属性。您的逻辑变得更容易：

// Loading the model from the localStorage
if(localStorage.getItem('model') !== null) this.model = JSON.parse(localStorage.getItem('model'));

// Saving the model to the localStorage
localStorage.setItem('model', JSON.stringify(this.model));