CODEWITHSUNDEEP
vue.jsvuetify.js
Hiba RRRR
Hiba RRRR

Reputation: 209

Store the Data in Local Storage

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>

Upvotes: 0

Views: 416

Answers (2)

Fer
Fer

Reputation: 36

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

Upvotes: 1

Jazuly
Jazuly

Reputation: 1414

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

Upvotes: 1

Related Questions