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 相关文章推荐
JavaScript 三种创建对象的方法
Oct 16 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
jquery图形密码实现方法
Mar 11 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
深入解析微信小程序开发中遇到的几个小问题
Jul 11 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设计模式 Visitor 访问者模式
2011/06/28 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
PHP静态成员变量
2017/02/14 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
德国网上花店:Valentins
2018/08/15 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
单位领导证婚词
2014/01/14 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
体育课外活动总结
2014/07/08 职场文书
信访稳定工作汇报
2014/10/27 职场文书
委托书格式要求
2015/01/28 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
入党心得体会
2019/06/20 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android