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

Answer 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