I am currently working on storing data using Vue.js and local storage.
By writing localStorage.set('something', 5) in my main.js file, I can view the data in the Chrome dev tools under the 'Storage' section in the 'Application' panel.
However, when it comes to storing other data that I intend to use, I am facing an issue. This code is located within the 'methods: {}' section of my App.vue parent component. I suspect this might be causing the problem, but being new to Vue, I am unsure about where to place my code in order for the data to appear in local storage in the dev tools.
The code snippet presented here is merely to indicate its position, not its operation.
// 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')
}
}
Could you kindly guide me on where I should put my code so that the data appears correctly in local storage?