How Can I Insert Data Into Local Storage with Vue.js?

Question

I'm trying to store data into local storage with Vue.js.

If I go into my main.js file and write localStorage.set('something', 5). I can see the data in my Chrome dev tools under 'Storage' in the 'Application' panel.

I want this to happen with my other data (the data I actually plan on using) but I don't see it. However, this code is stored under 'methods: {}' in my App.vue parent component. I'm gonna assume this is the problem but as I'm new to Vue I have no idea where to put my code so it will display in local storage in dev tools.

I'm displaying my code here to show its location, not its functionality.

// App.vue
data() {
  return {
    healthScore: 0,
    storedHealthScore: 0
  }
},
methods: {
  setHealthScore() {
    localStorage.setItem('HealthScore', this.healthScore)
},
  getHealthScore() {
    this.storedHealthScore = localStorage.getItem('HealthScore')
},
  removeHealthScore() {
    localStorage.removeItem('HealthScore')
  }
}

Where do I need to place my code so that I will see this data in local storage?

Raj · Accepted Answer · 2019-09-18 17:03:30Z

1

It doesn't matter in which file your are storing data. It's is available throughout the your website.And also make sure your setHealthScore() is working correctly.

answered Sep 18, 2019 at 17:03

Raj

375 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user12037570 Over a year ago

I don't think the file matters but the location in the file. I don't know how to make sure setHealthScore() is working. Obviously console.log, but I don't know where console.logs should be placed in Vue.js apps.

Raj Over a year ago

setHealthScore() { console.log('button clicked!') localStorage.setItem('HealthScore', this.healthScore) }, now please make sure you function is working correctly

user12037570 Over a year ago

Yeah, I've tried it. Nothing appears in the console. For whatever reason, I can't get local storage functions to work under methods: {}.

Raj Over a year ago

Where are you calling setHealthScore() function from? also, remove return from data {} without it is working fine.

user12037570 Over a year ago

Under methods: {} in App.vue. It shows up top. I need data() there for other things. I didn't post all my data() properties on here because they're not relevant.

|

Collectives™ on Stack Overflow

How Can I Insert Data Into Local Storage with Vue.js?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related