在實際開發中，保存視頻時間是一個常見的需求，特別是在視頻播放器應用程序中。Vue是一款流行的前端框架之一，它提供了很多有用的工具和函數來使開發過程更加高效和便捷。如果你使用Vue來構建一個視頻播放器，那么保存視頻時間是一個需要解決的問題。

在Vue中，為了保存視頻時間，我們可以使用localStorage。它是HTML5引入的一個新特性，用于在瀏覽器本地存儲鍵/值對。localStorage對象包含兩個方法：setItem和getItem。我們可以使用setItem方法將數據存儲在本地，使用getItem方法取出數據。

// 保存視頻的當前時間
localStorage.setItem('videoTime', currentTime);
// 獲取視頻的上一次播放時間
let lastTime = localStorage.getItem('videoTime');

在使用localStorage時需要注意一些問題。首先，localStorage只能存儲字符串類型的數據。如果要存儲其他類型的數據，需要進行類型轉換。其次，localStorage存儲的數據在瀏覽器關閉后仍然存在。因此，如果需要刪除數據，需要使用removeItem方法。

// 刪除視頻的播放時間
localStorage.removeItem('videoTime');

除了localStorage，我們還可以使用Vuex來保存視頻時間。Vuex是Vue中的一個狀態管理庫，用于管理全局狀態。在使用Vuex時，我們需要先定義一個狀態（state），存儲視頻的當前時間。然后，在視頻時間發生變化時，我們可以使用Vuex的mutation將該值更新。最后，我們可以使用getter獲取存儲的視頻時間。

// 定義狀態
const state = {
currentTime: 0
};
// 定義mutation
const mutations = {
setVideoTime (state, time) {
state.currentTime = time;
}
};
// 訪問狀態
const getters = {
getVideoTime: state =>{
return state.currentTime;
}
}

最后，在編寫Vue視頻播放器時，我們需要使用定時器和事件監聽器來獲取視頻的播放時間并實時更新。我們可以使用video元素的timeupdate事件來監聽視頻時間的變化，使用setInterval函數定時保存視頻時間。

// 監聽video時間變化
this.video.addEventListener('timeupdate', () =>{
// 更新存儲的視頻時間
localStorage.setItem('videoTime', this.video.currentTime);
// 更新Vuex存儲的視頻時間
this.$store.commit('setVideoTime', this.video.currentTime);
});
// 定時保存視頻時間
setInterval(() =>{
localStorage.setItem('videoTime', this.video.currentTime);
this.$store.commit('setVideoTime', this.video.currentTime);
}, 5000);

總的來說，在Vue中保存視頻時間是一個比較簡單的任務。我們可以使用localStorage和Vuex兩種方法來實現。localStorage是一種輕量級的本地存儲方式，用于保存簡單的數據。而Vuex是一個更強大的狀態管理庫，可用于管理全局狀態。無論選擇哪種方法，我們都需要使用定時器和事件監聽器來實現數據的實時更新。