vue.js - Cleanest way to work with localStorage in VUE

Question

I am trying to set value from v-for directive into localStorage. Right now it says

Storage ? length: 1 ? songs: "undefined"

This is what I want to store when pressing the button:

<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 I would appreciate any comment on my code as I am here to learn and trying to write the cleanest way, yet I am a beginner so please do mind my mistakes below

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,
  },
},
}

question from:https://stackoverflow.com/questions/66045589/cleanest-way-to-work-with-localstorage-in-vue

Answer 1

EDIT: alright, here I am with a new code example. In this one, you can see a playlist implementation that may be useful to you. You will able to see a playlist logic:

• add a first user
• append a new user
• delete the whole playlist

Here it is: https://codesandbox.io/s/save-entity-to-localstorage-with-array-appending-r5b6z?file=/pages/index.vue

You basically just need to handle the duplicates and see when you load it in your project !

---

So, as told in the comments in your question, you cannot and should not store HTML directly into the localStorage.
You may store the object itself, and then use some logic if you wish to fill your template with the localStorage.

Here is a demo on how to:

• call an API and wait for it with async/await syntax
• loop on those results
• save a specific user to the localStorage

You may store several users rather than one, I don't know. But this is the starting point you should work on.

Here you can see on the screenshot, that it's saved properly into the localStorage