將數據存儲在本地存儲中

Question

我有這個組件來創建一個配方，但我想將數據存儲在本地存儲中。 當我打印“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 !== "" &&
        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

要將數據存儲到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獲取足夠的數據

Answer 2

本地存儲是一種鍵值數據結構，您必須指定一個鍵，該鍵將用於從存儲中檢索數據作為第一個參數。 這是語法localStorage.setItem(keyName, keyValue);

此外，它必須作為字符串保存和檢索，保存時將其字符串化，獲取時對其進行解析。

你保存對象的代碼應該是這樣的：

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

並用於檢索：

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