vue 关闭浏览器窗口的时候,清空localStorage的数据示例


Posted in Javascript onNovember 06, 2019

如果是用vue做的单页面程序的时候,将监听的方法放在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(){
      // 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据
      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 关闭浏览器窗口的时候,清空localStorage的数据示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
javascript简易画板开发
Apr 12 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
Postman动态获取返回值过程详解
Jun 30 Javascript
vue项目强制清除页面缓存的例子
Nov 06 #Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 #Javascript
JS实现随机抽取三人
Nov 06 #Javascript
Node对CommonJS的模块规范
Nov 06 #Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 #Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 #Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 #Javascript
You might like
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
基于php实现的验证码小程序
2016/12/13 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
javascript 写类方式之二
2009/07/05 Javascript
jquery中动态效果小结
2010/12/16 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python绘制双柱形图代码实例
2017/12/14 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
十佳护士获奖感言
2014/02/18 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫