在 VUE 中使用 localStorage 的最简洁方式

Question

我正在尝试将 v-for 指令的值设置到 localStorage。现在它说

Storage length: 1 songs: "undefined"

这是我按下按钮时要存储的内容：

<article
  class="all-tracks"
  v-for="tracks in artist"
  :key="tracks.id"
>
  <h1 class="track-title">
    {{tracks.track.track_name}}
  </h1>
  <div class="track_artist">
    {{tracks.track.artist_name}}
  </div>
  <div class="track-album">
    {{tracks.track.album_name}}
  </div>
  <button class="btn btn-secondary btn-sg" @click="addToPlaylist()">
    Add to playlist
  </button>
</article>

P.S 我将不胜感激对我的代码的任何评论，因为我在这里学习并尝试以最简洁的方式编写，但我是初学者所以请注意下面的错误

import axios from 'axios';

export default {
name: 'SearchArea',
  props: {
  },
  data() {
    return {
      artist: [],
      songs: [],
    };
  },
  
methods: {
 fetchMusic(e) {
    if (e.key === 'Enter') {
      axios.get(``, {
         headers: {
          'Access-Control-Allow-Origin': '*',
         },
       })
         .then((response) => response).then(this.setResults);
     }
   },
setResults(results) {
    this.artist = results.data.message.body.track_list;
     this.songs = results.data.message.body.track_list.track;
 },
   addToPlaylist() {
     localStorage.songs = JSON.stringify(this.songs);
    }
 },
  watch: {
   artist: {
    handler() {
      localStorage.setItem('songs', JSON.stringify(this.songs));
    },
    deep: true,
  },
},
}

Answer 1

编辑：好的，这里是一个新的代码示例。在这一篇中，您可以看到一个可能对您有用的 playlist 实现。您将能够看到播放列表逻辑：

添加第一个用户
追加一个新用户
删除整个播放列表

这里是：https://codesandbox.io/s/save-entity-to-localstorage-with-array-appending-r5b6z?file=/pages/index.vue

您基本上只需要处理重复项并查看何时将其加载到您的项目中！

因此，正如您问题中的评论所述，您不能也不 不应该 将 HTML 直接存储到 localStorage。
您可以存储对象本身，如果您希望用 localStorage 填充模板，则可以使用一些逻辑。

Here 是关于如何：

的演示

调用 API 并使用 async/await 语法等待它
循环这些结果
将特定用户保存到本地存储

您可能会存储多个用户而不是一个，我不知道。但这是你应该努力的起点。

在这里你可以在屏幕截图上看到，它已正确保存到 localStorage

在 VUE 中使用 localStorage 的最简洁方式

Cleanest way to work with localStorage in VUE

local-storage

vue.js

vue-component