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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
vue如何判断dom的class
Apr 26 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 Javascript
JavaScript实现栈结构详细过程
Dec 06 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
探讨如何把session存入数据库
2013/06/07 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
PHP与以太坊交互详解
2018/08/24 PHP
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
深入理解Node module模块
2018/03/26 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
vue中轮训器的使用
2019/01/27 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 实现简单的电话本功能
2015/08/09 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
Python request使用方法及问题总结
2020/04/26 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
大学军训感言400字
2014/03/11 职场文书
学习雷锋标语
2014/06/25 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
辞职书格式样本
2015/02/26 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
python Polars库的使用简介
2021/04/21 Python
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
深入解析MySQL索引数据结构
2021/10/16 MySQL