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