Блог

У меня есть этот компонент для создания рецепта, но я хочу сохранить данные в локальном хранилище. Когда я печатаю «recipeData», он печатается на консоли. Например, я ввожу название рецепта и его описание и т. Д., И я печатаю данные в консоли, и введенные мной элементы печатаются, но когда я печатаю «recipeData.title», печатается, что он не определен. И когда я хочу сохранить recipeData в локальном хранилище, он не сохраняет его. Как я могу решить проблему?

 <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 !== "" amp;amp;
        this.description !== "" amp;amp;
        this.imageUrl !== "" amp;amp;
        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>
  

чтобы сохранить данные localStorage , вы должны сначала определить имя хранилища, а затем данные.

localStorage.setItem('storageName', recipeData)

чтобы просмотреть данные localStorage .

console.log(localStorage.getItem('StorageName'))

узнать больше https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

и в этом нет необходимости this.recipeData , потому что вы объявляете переменную в функции. чтобы получить достаточно данных с recipeData

Локальное хранилище представляет собой структуру данных типа ключ-значение, в качестве первого параметра необходимо указать ключ, который будет использоваться для извлечения данных из хранилища. Это синтаксис localStorage.setItem(keyName, keyValue);

Кроме того, их необходимо сохранять и извлекать в виде строки, упорядочивая ее при сохранении и разбирая при получении.

Ваш код для сохранения объекта должен быть таким:

 localStorage.setItem('recipeDataKey', JSON.stringify(this.recipeData));
  

и для извлечения:

 const recipeData = JSON.parse(localStorage.setItem('recipeDataKey'));