local storage input fields are showing undefined value

Question

Here I am using vue.js. And in vue.js I have used local storage to temporarily stored the user entered value in the form fields. So everything is working fine here but the issue is while i dont have any value in the form fields it is giving undefined as place holder. So where I am going wrong please let me know. Below is my code/

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;

You cannot set properties on localStorage object. instead use setItem() and getItem() to store and retrieve data. — Igor Moraru
– Igor Moraru, Commented Sep 8, 2021 at 14:06

Flashtube · Accepted Answer · 2021-09-10 10:47:32Z

First of all you are using localStorage wrong. Check out the official documentation on localStorage.

To set a key-value pair you can use:

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

To retreive a value from the localStorage use:

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

To remove an item from the localStorage use:

localStorage.removeItem('my_key');

So one of your if statments would look like this:

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 = '';
}

To set the value in the localStorage use:

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

Also, im not sure its the best way to store the values in the localStorage. I belive there would be a solution to store them in memory (eg this.model). Otherwise if you have to switch between routes consider using vuex, a state management system.

EDIT Also if you have to use the localStorage, consider to just JSON.stringify the entire model and not each attribute seperatly. Your logic becomes way easier:

// 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));

Collectives™ on Stack Overflow

local storage input fields are showing undefined value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related