vue 关闭浏览器窗口的时候,清空localStorage的数据示例

如果是用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的数据示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue生成token保存在客户端localStorage中的方法

    vue生成token保存在客户端localStorage中的方法

    前面我们已经了解了可以通过localStorage在客户端(浏览器)保存数据. 我们后端有这样一个接口: http://localhost/yiiserver/web/index.php/token?client_appid=aaa&client_appkey=bbb 其实就向clients(理解为用户表即可)里面去生成一个token 这里的client_appid 就相当于用户名,client_appkey 就相当于密码. 这样后端认证之后会生成一个access-token,我们需要把这个ac

  • vue中使用localstorage来存储页面信息

    vue中使用localstorage来存储页面信息

    今天小颖在跟着慕课网学习vue,不学不知道,一学吓一跳,学了才发现,我之前知道的只是vue的冰山一角,嘻嘻,今天把小颖跟着慕课网学习的demo,给大家分享下,希望对大家有所帮助嘻嘻. 环境搭建: 参考:vue API 超简单的Vue.js环境搭建教程 详情: npm install --global vue-cli  vue init webpack vue-project 然后: cd vue-project npm install    如果你配置了淘宝镜像,也可以用cnpm install

  • 详解vuex结合localstorage动态监听storage的变化

    需求:不同组件间共用同一数据,当一个组件将数据发生变化时,其他组件也可以响应该变化. 分析:vue无法监听localstorage的变化.localstorage主要用于不同页面间传值,vue适合组件间传值.对于组件间共用同一数据又想保存住信息或者再页面刷新的时候不丢失数据(vuex在页面刷新的时候存储的值会丢失,localstorage存储在本地浏览器中),可以采用vuex+localstorage的方式. 关于vuex和storage的区别 1.最重要的区别:vuex存储在内存,locals

  • 详解vue中localStorage的使用方法

    什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage 1.sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 2.localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在 所以上次使用cookie的时候就遇到了一个坑,设置后

  • 详解Vue中localstorage和sessionstorage的使用

    1. 项目使用中暴露出来的几个问题 大家到处直接使用localstorage['aaa']='这是一段示例字符串'这些原生语法实现,这样耦合度太高了,假如有一天我们需要换实现方式,或者对存储大小做一些控制,那么需要修改的代码就会很多 项目很大,那么大家起的key的名字难免会重复,而且这样也会造成全局污染 因为localstorage的使用不规范,所以造成了存储空间的浪费和不够用 2. 解决办法 封装storage的使用方法,统一处理 规范storage的key值的命名规则 规范storage的使

  • vue 关闭浏览器窗口的时候,清空localStorage的数据示例

    如果是用vue做的单页面程序的时候,将监听的方法放在App.vue是最灵活的 <template> <div id="main" class="app-main"> <router-view></router-view> </div> </template> <script> export default { data () { return { theme: this.$store

  • vue关闭浏览器退出登录的实现示例

    vue关闭浏览器退出登录的实现示例

    目录 1.beforeunload事件 2.unload事件 3.源码部分   项目需要:也在网上找了不少类似的文章,不过用起来多少有点问题,毕竟要适合自己的需求,我这里是vue3适用,理论上vue2也可以使用,我写的方法是通用的.   这些方法无非都是根据beforeunload和unload这两个事件执行的.   下面我搜了下菜鸟教程和MDN对两个事件的介绍,可自行琢磨. 1.beforeunload事件 1.1.菜鸟教程: 1.2.MDN 2.unload事件 2.1.菜鸟教程 2.2.M

  • js关闭浏览器窗口及检查浏览器关闭事件

    js关闭浏览器窗口 js关闭浏览器窗口,不弹出提示框.支持ie6+,火狐,谷歌等浏览器. 复制代码 代码如下: <html> <head /> <body> <script type="text/javascript"> function closeWin(){ window.opener=null; window.open('','_self',''); window.close(); } </script> <a o

  • window.close(); 关闭浏览器窗口js代码的总结介绍

    window.close(); 关闭浏览器窗口js代码的总结介绍 序号 关闭代码 需要确认 无任何作用 无需确认 测试 1 window.close() IE7 firefox,chrome, safari Opera Close 2 window.opener=null; window.open('','_self'); window.close();   firefox IE7,Opera, chrome,safari Close 3 window.open('','_self'); win

  • 在firefox和Chrome下关闭浏览器窗口无效的解决方法

    首先IE是可以通过window.close()来关闭浏览器窗口的,但是在firefox和Chrome下是无效的. 原因在于: Firefox下默认设置是无法通过脚本来关闭浏览器窗口的,为的是防止恶意脚本注入, 所以调整的方式就是在url地址栏中输入about:config, 然后在配置列表中找到 dom.allow_scripts_to_close_windows 点右键的选切换把上面的false修改为true即可. 默认是false chrome下的默认是不支持这种关闭方式的,但是也可以通过一

  • js无提示关闭浏览器窗口的两种方法分析

    js无提示关闭浏览器窗口的两种方法分析

    1,使用js: 用多种方式打开一个页面,然后用 window.close() 关闭它,在各浏览器下表现有所不同.如在地址栏中直接输入URL 时,Firefox Chrome Safari 下调用 window.close() 关闭页面无效.再如 Ctrl + 点击链接打开的窗口,Firefox 下无法通过调用 window.close() 来关闭. firefox下无法关闭可能原因: 不是JS代码window.close()的问题,而是Firefox的配置问题,解决方法如下: 在Firefox地

  • 关闭浏览器窗口弹出提示框并且可以控制其失效

    在js页面加载时运行如下代码 复制代码 代码如下: window.onbeforeunload = function(){ return "未保存的内容可能会丢失"; }; 此代码在火狐和ie下不会显示return的值在google浏览器下显示此文字. 失效控制 触发js运行如下: 复制代码 代码如下: window.onbeforeunload = function(){};

  • 浏览器窗口加载和大小改变事件示例

    复制代码 代码如下: window.onload = function() { var height = document.body.clientHeight; document.getElementById("vivS").style.height = (height - 20) + "px"; document.getElementById("emd").style.height = (height - 20) + "px"

  • js检查是否关闭浏览器的方法

    本文实例讲述了js检查是否关闭浏览器的方法.分享给大家供大家参考,具体如下: //关闭浏览器提示信息 window.onbeforeunload = function (e) { e = e || window.event; var y = e.clientY; if (y <= 0//点击浏览器或者选项卡的关闭按钮 || y >= Math.max(document.body ? document.body.clientHeight : 0, document.documentElement

  • 关闭浏览器时提示onbeforeunload事件

    onbeforeunload事件 它是这样用的: 复制代码 代码如下: <script language="javascript">      g_blnCheckUnload = true;      function RunOnBeforeUnload() {              if (g_blnCheckUnload) {        window.event.returnValue = 'You will lose any unsaved content'

随机推荐