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 相关文章推荐
使用正则替换变量
May 05 Javascript
javascript 异常处理使用总结
Jun 21 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
jquery 插件学习(三)
Aug 06 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
jquery实现页面加载效果
Feb 21 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
详解JavaScript作用域和作用域链
Mar 19 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
微信小程序class封装http代码实例
Aug 24 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
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
YII中assets的使用示例
2014/07/31 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
微信支付开发告警通知实例
2016/07/12 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
一个实用的php验证码类
2017/07/06 PHP
php支付宝APP支付功能
2020/07/29 PHP
js修改input的type属性问题探讨
2013/10/12 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
python正则表达式之作业计算器
2016/03/18 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
python使用selenium实现批量文件下载
2019/03/11 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
如何在pycharm中安装第三方包
2020/10/27 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
《鱼游到了纸上》教学反思
2014/02/20 职场文书
诚信承诺书范文
2014/03/27 职场文书
给市场的环保建议书
2014/05/14 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL