當打開頁面時，添加事件監聽，即監聽beforeunload事件，beforeunload事件在關閉頁面時觸發。即當關閉頁面時，手動刪除localStorage中的數據。
app.vue中的代碼如下：
<template> <div id="app"> <router-view /> </div> </template> <script> export default { name: "app", created() { window.addEventListener("`beforeunload`", () => { localStorage.removeItem("store"); localStorage.setItem("store", JSON.stringify(this.$store.state)); }); }, destroyed() { localStorage.removeItem("store"); } }; </script>
相關知識點如下：
1、vue實例的生命周期
每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鈎子的函數，這給了用戶在不同階段添加自己的代碼的機會。比如created鈎子可以用來在一個實例被創建之后執行代碼
也有一些其它的鈎子，在實例生命周期的不同階段被調用，如mounted和destroyed。生命周期鈎子的 this 上下文指向調用它的 Vue 實例。
當我們離開這個頁面的時候，便會調用destroyed函數
二、beforeunload事件
當窗口，文檔及其資源即將卸載時，將觸發該事件。
語法
//通用 window.onbeforeunload = function (event) {}; //IE9+ window.addEventListener("beforeunload", function (event) {});
事件觸發場景
1）、關閉瀏覽器窗口
2）、通過地址欄或收藏夾前往其他頁面的時候
3）、點擊返回，前進，刷新，主頁其中一個的時候
4）、點擊 一個前往其他頁面的url連接的時候
5）、使用document.write() 方法（輸出內容）
6）、使用document.open() 打開一個新的空白文檔
7）、使用document.close() 方法可關閉一個由open()方法打開的輸出流，並顯示選定的數據。
8）、當使用window.open() 打開一個頁面，並把本頁的window的名字傳給要打開的頁面的時候。
9）、使用window.close() 關閉頁面的時候
10）、重新賦予window.location.href的值的時候。
11）、通過input type=”submit”按鈕提交一個具有指定action的表單的時候。
12）、使用form.submit() 提交表單的時候
三、localStorage永久存儲
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數據。
localStorage 用於長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去刪除。