vue 關(guān)閉瀏覽器窗口的時候,清空localStorage的數(shù)據(jù)示例
更新時間：2019年11月06日 09:05:03 作者：XuHang666
今天小編就為大家分享一篇vue 關(guān)閉瀏覽器窗口的時候,清空localStorage的數(shù)據(jù)示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如果是用vue做的單頁面程序的時候，將監(jiān)聽的方法放在App.vue是最靈活的
<template>
<div id="main" class="app-main">
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
theme: this.$store.state.app.themeColor
};
},
mounted () {
},
beforeDestroy () {
},
methods: {
},
mounted(){
// 關(guān)閉瀏覽器窗口的時候清空瀏覽器緩存在localStorage的數(shù)據(jù)
window.onbeforeunload = function (e) {
var storage = window.localStorage;
storage.clear()
}
}
};
</script>
<style>
html,body{
width: 100%;
height: 100%;
background: #f0f0f0;
overflow: hidden;
}
.app-main{
width: 100%;
height: 100%;
}
</style>
二、如果是多頁面的程序的話，在每一個頁面同理只要在mounted方法中，注冊這個事件即可！
以上這篇vue 關(guān)閉瀏覽器窗口的時候,清空localStorage的數(shù)據(jù)示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
利用Vue3 (一）創(chuàng)建Vue CLI 項目
這篇文章主要介紹利用Vue3 創(chuàng)建Vue CLI 項目，下面文章內(nèi)容附有官方文檔鏈接，安裝過程，需要的可以參考一下2021-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡單計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要為大家詳細(xì)介紹了vue加載天氣組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
Vue 實現(xiàn)拖動滑塊驗證功能(只有css+js沒有后臺驗證步驟)
這篇文章給大家介紹了基于vue實現(xiàn)拖動滑塊驗證功能，代碼引用css與js都是線上的，將代碼全部復(fù)制到一個html中可以直接打開，超級簡單，感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
這篇文章主要介紹了解決vue2中使用elementUi打包報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue引入使用localforage改進(jìn)本地離線存儲方式(突破5M限制)
這篇文章主要介紹了Vue引入使用localforage改進(jìn)本地離線存儲方式(突破5M限制),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue?退出登錄?清除localStorage的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
在vue項目中采用動態(tài)添加路由的方式,第一次進(jìn)入頁面會正常顯示,但是點擊刷新頁面后會導(dǎo)致頁面空白,所以下面這篇文章主要給大家介紹了關(guān)于vue3動態(tài)路由刷新后空白或者404問題的解決方法,需要的朋友可以參考下2022-07-07
Vue通過echarts實現(xiàn)數(shù)據(jù)圖表化顯示
Echarts，它是一個與框架無關(guān)的 JS 圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計IONIC也能用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue2.0設(shè)置proxyTable使用axios進(jìn)行跨域請求的方法
這篇文章主要介紹了vue2.0設(shè)置proxyTable使用axios進(jìn)行跨域請求，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10