从 Vuejs 中的 localStorage 中删除值
Posted
技术标签:
【中文标题】从 Vuejs 中的 localStorage 中删除值【英文标题】：Remove value from localStorage in Vuejs 【发布时间】：2019-11-19 04:29:09 【问题描述】：朋友
问题
我的问题是，当我在视频部分观看特定剧集时，我之前看过的视频的 src 会存储在本地存储中。
我的目的是在离开视频部分后消除本地存储的价值。
模板视频
<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>
脚本
我在mounted属性中实现的是，如果视频存在，则消除属于关键vuex的obj视频。
但是我所做的并没有做任何事情，当我离开视频部分时，视频对象会维护视频的 src。
<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>
变异
我认为我要做的是创建一个突变来清理本地存储
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;
;
动作
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);
);
,
【问题讨论】：
使用 vue 生活方式挂钩。beforeDestroy 可能是你最好的选择
@DerekPollard 你能给我使用该属性的解决方案吗？我从未使用过该属性
下面mounted写一个函数beforeDestroy。但这不是你的解决方案。看alligator.io/vuejs/component-lifecycle。
@ChrisMichael - 答案贴在下面
您的密钥应该被删除。你做的一切都很好。我建议将对象值设置为 null 而不是删除它们。然后稍后，检查道具是否。是null，而不是检查它是否存在。 如果您将某个属性设为空，它仍会被视为在对象上“设置”并会被枚举
【参考方案1】：
我的解决方案
我找到了解决方案，但我不知道它是否是最佳的。但他负责打扫。
beforeDestroy()
const vuex = JSON.parse(localStorage.getItem('vuex'));
if(vuex.videos)
localStorage.removeItem(vuex.videos);
实际问题
当我离开视频会话并想去看另一个视频时，上一个视频的屏幕仍然存在
我的目的是让屏幕保持黑色，视频的分钟数为零
【讨论】：
【参考方案2】：解决方案
对于这样的事情，我会使用 Vue 生命周期钩子beforeDestroy：
在 Vue 实例被销毁之前调用。在这个阶段，实例仍然可以正常工作。
例子：
export default
// ... vue component stuff ...
beforeDestroy ()
localStorage.removeItem('vuex');
说明
这将确保在从虚拟和真实 DOM 中删除实例之前，我们会从名为 vuex 的 localStorage 中删除一个项目。
请注意，这不会清除存储在 Vuex 中的状态。为此，您需要创建一个突变并以与beforeDestroy() 相同的方式调用该突变。
希望这会有所帮助！
【讨论】：
上面添加了mutations代码，但是不知道清理state.videos的mutation怎么实现以上是关于从 Vuejs 中的 localStorage 中删除值的主要内容，如果未能解决你的问题，请参考以下文章
Vuex/Vuejs：在 vuex 存储中访问 localStorage
如何在 Vue js 中使 localStorage 中的数据具有反应性