Remove value from localStorage in Vuejs

Question

friends

Problem

I have the problem that when I am in the video section watching a particular episode, in the local storage the src of the video that I saw before is stored.

My intention is to eliminate the value of the local storage once it leaves the video section.

Template Video

<template>
  <!-- Main -->
  <main class="flex-1 bg-grey-lightest z-0 py-5 px-0">
    <div class="flex flex-wrap max-w-5xl mx-auto">
      <!-- main col -->
      <div class="w-full md:flex-1">
        <!-- player -->
        <div class="bg-black relative mb-3">
          <video 
            id="video"
            controls
          ><source :src="videos.video" type="video/mp4"></video>
        </div>
        <!-- video info -->
        <div class="flex flex-wrap items-end">
          <!-- title -->
          <div class="pb-2">
            <h1 class="text-xl my-2">
              <div class="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert">
                <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">video</span>
                <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">{{content}}</span>
                <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">{{state}}</span>
                <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">eps - {{eps}}</span>
                <span class="font-semibold mr-2 text-left flex-auto">{{Title}}</span>
                <svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/></svg>
              </div>
            </h1>
            <span class="text-base text-grey-darken">{{synopsis}}</span>
          </div>
          <!-- buttons actions -->
          <div class="ml-auto">
            <!-- likes -->
            <div class="flex relative pb-2">
              <!-- like -->
              <div class="flex items-center">
                <span class="text-black opacity-50 text-sm"> ライウアニミー</span>
              </div>
              <!-- hate -->
              <div class="flex items-center ml-5">
                <span class="text-xs text-grey-darken ml-1">🥇</span>
              </div>
              <div class="absolute w-full h-1 bg-grey pin-b t-5 rounded-full overflow-hidden">
                <div class="absolute pin-l pin-t w-3/4 h-full bg-grey-darkest"></div>
              </div>
            </div>
          </div>
          <hr class="w-full border-t m-0 mb-3 "/>
        </div>
      </div>
    </div>
  </main>
</template>

Script

What I have implemented In the mounted property is that if the video exists, it eliminated the obj videos that belongs to the key vuex.

But what I have done does not do anything, when I leave the video section the video object maintains the src of the video.

<script>
  import swal from 'sweetalert';
  import {mapState} from 'vuex'
  import store from '../store/store'
  export default{
    name: 'Video',
    props: ['Id' , 'Title' , 'Eps' , 'Synopsis' , 'ContentType' , 'State'],
    data(){
      return{
        id: this.Id,
        eps: this.Eps,
        synopsis: this.Synopsis,
        content: this.ContentType,
        state: this.State,
      }
    },
    computed:{
      ...mapState(['videos' , 'isLoading'])
    },
    watch:{
      "Eps": function(value){
        this.eps = value;
        let eps = this.eps;
        let info = {id: this.id , eps: eps}
        store.dispatch('GET_ANIME_VIDEO' , info)
        swal("Message!", "Wait a few seconds for the video to load\nIt's normal that it takes a bit", "success");
      },
      "videos.video": function(value){
        this.videos.video = value;
        document.getElementById('video').load();
      }
    },
    mounted(){
      if(this.videos.video){
        const vuex = JSON.parse(localStorage.getItem('vuex'));
        delete vuex.videos;
        localStorage.setItem("vuex", JSON.stringify(vuex));
      }
    },
  };
</script>

Mutation

I think what I have to do is create a mutation to clean the localstorage

export const mutations = {
  initialiseStore(state) {
    // Check if the ID exists
    if(localStorage.getItem('store')) {
      // Replace the state object with the stored item
      this.replaceState(
        Object.assign(state, JSON.parse(localStorage.getItem('store')))
      );
    }
  },
  SET_LATEST_DATA(state , payload){
    state.latest = payload;  
  },
  SET_VIDEO_ANIME(state , payload){
    state.videos = payload;
  },
  SET_ANIME_ALPHA(state , payload){
    state.animesByAlpha = payload;
  },
  SET_ANIME_GENDER(state , payload){
    state.animesByGender = payload;
  },
  SET_ANIME_SEARCH(state , payload){
    state.searchAnimeList = payload;
  },
  SET_GET_SCHEDULE(state , payload){
    state.schedule = payload;
  },
  SET_MOVIES(state , payload){
    state.movies = payload;
  },
  SET_OVAS(state , payload){
    state.ovas = payload;
  },
  IS_LOADING(state , payload){
    state.isLoading = payload;
  }
};

Action

 GET_ANIME_VIDEO({commit} , info){
    console.log("id: " , info.id , "chapter: " , info.eps)
    A.get(`${API_URL_ENDPOINT.video}` + "/" + `${info.id}` + "/" + `${info.eps}`)
      .then((res) =>{
        console.log("video src = " , res.data)
        commit('SET_VIDEO_ANIME' , res.data);
        commit('IS_LOADING' , false);
      }).catch((err) =>{
      console.error(err);
    });
  },

Solution 1

My Solution

I found the solution, but I do not know if it is the most optimal. But he does the cleaning.

beforeDestroy(){
  const vuex = JSON.parse(localStorage.getItem('vuex'));
  if(vuex.videos){
    localStorage.removeItem(vuex.videos);
  }
}

Actual Problem

When I leave the video session and I want to go see another video, the screen of the previous video remains

My intention is to keep the screen black and the minutes of the video at zero

Solution 2

Solution

For something like this, I'd use the Vue lifecycle hook beforeDestroy:

Called right before a Vue instance is destroyed. At this stage the instance is still fully functional.

Example:

export default {
  // ... vue component stuff ...
  beforeDestroy () {
    localStorage.removeItem('vuex');
  }
}

Explanation

This will ensure that before the instance is removed from the virtual AND real DOM, we are removing an item from the localStorage called vuex.

Please note, that this does not clear the state that's stored in Vuex. For that, you'd want to create a mutation and call that mutation in the same way from beforeDestroy().

Hope this helps!

Comments

[Chris Michael]

I added the mutations code above, but I do not know how to implement the mutation of cleaning the state.videos