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 相关文章推荐
jQuery中:empty选择器用法实例
Dec 30 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
js cavans实现静态滚动弹幕
May 21 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使用正则过滤js脚本代码实例
2014/05/10 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
js防止表单重复提交实现代码
2012/09/05 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
Python里disconnect UDP套接字的方法
2015/04/23 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Flask框架web开发之零基础入门
2018/12/10 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
研究生自荐信
2013/10/09 职场文书
应届生服务员求职信
2013/10/31 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
创新社会管理心得体会
2014/09/12 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python