Store the Data in Local Storage - vue.js

Question

I have this Component to create a recipe, but I want to store the data in the local storage.
When I print the "recipeData" it is printed on the console.
For example, I enter the name of the recipe and the description for it, etc. and I print the data in the console and the elements I have entered are printed, but when I print "recipeData.title" it is printed that it is not defined.
And when I want to store the recipeData in the local storage, it does not store it.
How can i solve the problem?
<template>
<v-app>
<v-container>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<h2 class="btn-style">Create Recipe</h2>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<form #submit.prevent="onCreateRecipe">
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-text-field
name="title"
label="Title"
id="title"
v-model="title"
color="#43A047"
required
>
</v-text-field>
</v-flex>
</v-layout>
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-text-field
name="imageUrl"
label="ImageUrl"
id="imageUrl"
v-model="imageUrl"
color="#43A047"
required
>
</v-text-field>
</v-flex>
</v-layout>
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<img :src="imageUrl" height="300px" />
</v-flex>
</v-layout>
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-text-field
name="description"
label="Description"
id="description"
v-model="description"
color="#43A047"
multi-line
required
>
</v-text-field>
</v-flex>
</v-layout>
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-text-field
name="ingredients"
label="Ingredients"
id="ingredients"
v-model="ingredients"
color="#43A047"
multi-line
required
>
</v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-btn
class="green darken-1 color"
:disabled="!formIsValid"
type="submit"
>
Create Redcipe
</v-btn>
</v-flex>
</v-layout>
</form>
</v-flex>
</v-layout>
</v-container>
</v-app>
</template>
<script>
export default {
data() {
return {
title: "",
imageUrl: "",
description: "",
ingredients: "",
};
},
computed: {
formIsValid() {
return (
this.title !== "" &&
this.description !== "" &&
this.imageUrl !== "" &&
this.ingredients != ""
);
},
},
methods: {
onCreateRecipe() {
if (!this.formIsValid) {
return;
}
const recipeData = {
title: this.title,
description: this.description,
imageUrl: this.imageUrl,
ingredients: this.ingredients,
};
console.log(recipeData)
console.log("The Local Storage"+localStorage.setItem(this.recipeData));
}
}
};
</script>
<style scoped>
.btn-style {
color: #43a047;
}
.color {
color: #fafafa;
}
</style>

Answer 1

to store the data to localStorage, you have to define name of the storage first and then the data.
localStorage.setItem('storageName', recipeData)
to see the data of localStorage.
console.log(localStorage.getItem('StorageName'))
learn more https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
and theres no need this.recipeData because u declare the variable on the function. to get the data enought with recipeData

Answer 2

Local storage is a key-value data structure, you have to specify a key that will be used to retrieved the data from the storage as the first parameter. This is the syntax localStorage.setItem(keyName, keyValue);
Also, it has to be saved and retrieved as a string, stringifying it when saving and parsing it when getting it.
Your code for saving the object should be like this:
localStorage.setItem('recipeDataKey', JSON.stringify(this.recipeData));
and for retrieving:
const recipeData = JSON.parse(localStorage.setItem('recipeDataKey'));