为 Vue.js 保存到本地存储时出错答案

【问题标题】：Error on saving to local storage for Vue.js为 Vue.js 保存到本地存储时出错
【发布时间】：2019-06-25 22:02:23
【问题描述】：

在我的 Vue JS 应用程序中，我试图将从 rest api 返回的数据保存到列表组件中，但出现以下错误：

Error in mounted hook: "SyntaxError: Unexpected token u in JSON at position 0"

我看不出是什么原因造成的？

组件：

<template>
  <div class="mb-5 mt-5 container">

    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action active">
        My List
        <span class="badge badge-light">{{List.length}}</span>
      </a>
      <a
        href="#"
        class="list-group-item list-group-item-action"
        v-for="(result, index) in List"
        :key="index"
      >
        {{result.collectionName}}
        <br>
        <b>{{result.artistName}}</b>
        <br>
        <div class="row">
          <div class="col-md-6">
            <button
              class="btn btn-success btn-sm btn-block"
              v-on:click="removeElement(index)"
            >Remove</button>
          </div>
          <div class="col-md-6">
            <button
              class="btn btn-info btn-sm btn-block"
              @click="toiTunesAlbum(result)"
            >View on iTunes</button>
          </div>
        </div>
      </a>
    </div>

    <button class="btn btn-info mt-5 btn-lg btn-block" @click="saveList()">Save</button>
  </div>
</template>

<script>
export default {
  name: "List",
  props: ["List"],

  mounted() {
    if(localStorage.result) this.result = JSON.parse(this.result);
  },

  methods: {
      saveList() {
      localStorage.result = this.result;
      localStorage.setItem('result', JSON.stringify(this.result));   
      /* eslint-disable no-console */
      console.log(this.result + 'List Saved');
      /* eslint-disable no-console */
    },

    removeElement: function(index) {
      this.List.splice(index, 1);
    },

    resizeArtworkUrl(result) {
      return result.artworkUrl100.replace("100x100", "160x160");
    },
    toiTunesAlbum(result) {
      window.open(result.collectionViewUrl, "_blank");
    }
  }
};
</script>

<style scoped>
.album-cover {
  width: 100%;
  height: auto;
  background-color: aqua;
}

.album-container {
  height: 350px;
}
</style>

关于如何将其余 api 结果保存到本地存储的任何想法都会很棒。我应该使用 List 数组还是结果？

【问题讨论】：

应该JSON.parse(this.result) 是JSON.parse(localStorage.result)？
即使将其更改为我仍然得到相同的错误....

标签： javascript arrays api vue.js vuejs2

【解决方案1】：

我认为您的问题是只有在 localStorage.result 有值时才初始化 this.result。如果第一次调用 saveList 时 localStorage.result 没有值，则 this.result 仍然未定义。如果该值仍未定义，请尝试设置默认值或跳过尝试保存。我也不确定 this.List 和 this.result 之间的关系，因为 List 似乎是结果列表？

【讨论】：