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)文章

elementui之封裝下載模板和導(dǎo)入文件組件方式
這篇文章主要介紹了關(guān)于elementui之封裝下載模板和導(dǎo)入文件組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
Vue項(xiàng)目線上更新無(wú)需強(qiáng)制刷新的幾種實(shí)現(xiàn)方案(無(wú)感更新)
在 Vue 項(xiàng)目中,當(dāng)發(fā)布新版本后,用戶(hù)可能因?yàn)闉g覽器緩存而繼續(xù)使用舊版本,所以本文給大家介紹了Vue 項(xiàng)目線上更新無(wú)需強(qiáng)制刷新的幾種實(shí)現(xiàn)方案,并通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下
2025-03-03
Vue結(jié)合leaflet實(shí)現(xiàn)克里金插值
本文主要介紹了Vue結(jié)合leaflet實(shí)現(xiàn)克里金插值，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06
Vue3安裝dataV報(bào)錯(cuò)問(wèn)題解決方案
這篇文章主要給大家介紹了關(guān)于Vue3安裝dataV報(bào)錯(cuò)問(wèn)題解決方案的相關(guān)資料,dataV用于大屏展示,個(gè)人覺(jué)得比echarts簡(jiǎn)單很多,需要的朋友可以參考下
2023-06-06
Vue3?路由頁(yè)面切換動(dòng)畫(huà)?animate.css效果
這篇文章主要介紹了Vue3路由頁(yè)面切換動(dòng)畫(huà)animate.css效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-09-09
vue使用自定義指令實(shí)現(xiàn)拖拽
這篇文章主要為大家詳細(xì)介紹了vue使用自定義指令實(shí)現(xiàn)拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
推薦一款簡(jiǎn)易的solid?js消息UI庫(kù)使用詳解
這篇文章主要為大家介紹了推薦一款簡(jiǎn)易的solid-js消息UI庫(kù)使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
Vue項(xiàng)目中ESLint配置超全指南(VScode)
ESLint是一個(gè)代碼檢查工具,用來(lái)檢查你的代碼是否符合指定的規(guī)范,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中ESLint配置(VScode)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04
vue終極性能優(yōu)化方案(解決首頁(yè)加載慢問(wèn)題)
最近在做項(xiàng)目中前端采用Vue技術(shù),發(fā)現(xiàn)首頁(yè)加載速度非常之慢,下面這篇文章主要給大家介紹了關(guān)于vue終極性能優(yōu)化方案,主要解決首頁(yè)加載慢問(wèn)題,需要的朋友可以參考下
2022-02-02
vue quill editor 使用富文本添加上傳音頻功能
vue-quill-editor 是vue項(xiàng)目中常用的富文本插件，其功能能滿(mǎn)足大部分的項(xiàng)目需求。這篇文章主要介紹了vue-quill-editor 富文本添加上傳音頻功能,需要的朋友可以參考下
2020-01-01