問題描述

剛學習vue不久，按照網上的demo做了一個簡單的note，使用localstorage做本地存儲，然后我想在刷新頁面或者離開頁面的調用localstorage方法，請問這樣做能實現嗎？如果可以，要怎么做？謝謝回答，感激不盡！

問題解答

一般使用 Vue 開發時，不需要摸 window.onload 這類 DOM 相關的 API，而是使用 Vue 封裝的組件生命周期鉤子：

export default { // ... // 在組件初始化時調用，可以簡單理解為頁面加載時 created () { // 存在 localStorage 的緩存內容 if (localStorage.data) { this.myData = JSON.parse(localStorage.data) } else { // 頁面無緩存內容時，初始化數據并寫入緩存 this.initData() } } // 在組件銷毀前調用，但這并不能監聽到頁面退出的事件 beforeDestory () { // 在此同樣可對 localStorage 做一些處理 }}回答2：

用生命周期函數，根據需求選擇用哪個，參考 https://cn.vuejs.org/v2/api/#選項-生命周期鉤子

使用localstorage做本地存儲，然后我想在刷新頁面或者離開頁面的調用localstorage方法

1、頁面刷新使用localstorage，也就是當vue被實例化之后有如下幾個可以供你使用：

export default { beforecreate() {// 創建前狀態 } created () {// 創建完畢狀態 } beforeMount(){// 掛載前狀態 } mounted(){// 掛載結束狀態 }}

這幾個都是可以在頁面刷新的時候操作本地存儲。注： 其實本地存儲也可以不寫在vue實例當中，本質上與vue無關,你只是在當頁面刷新的時候為了執行一段js而已

main.js

/* 項目啟動 */import Vue from ’vue’import App from ’./App’import router from ’./router’/**************************** 寫這里也不是不可以****************************/new Vue({ router: router, render: h => h(App) // components: { firstcomponent, secondcomponent }}).$mount(’#app’)

2、頁面關閉與vue的生命周期無關，也不存在銷毀一說，因此關閉頁面沒有方法讓你使用操作localStorage，這一點跟樓上幾位說的不一樣。