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动态给table添加、删除行 改进版
Jan 19 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
微信小程序url与token设置详解
Sep 26 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
Python简单实现子网掩码转换的方法
2016/04/13 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
致百米运动员广播稿
2014/01/29 职场文书
进口业务员岗位职责
2014/04/06 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
2014年教师节寄语
2014/08/11 职场文书
中秋节寄语2015
2015/03/24 职场文书
一百条裙子读书笔记
2015/07/01 职场文书