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%;
}

如果是多页面的程序的话，在每一个页面同理只要在mounted方法中，注册这个事件即可！

以上这篇Vue退出登录时清空缓存的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目中实现缓存的最佳方案详解

    vue项目中实现缓存的最佳方案详解

    需求 在开发vue的项目中有遇到了这样一个需求:一个视频列表页面,展示视频名称和是否收藏,点击进去某一项观看,可以收藏或者取消收藏,返回的时候需要记住列表页面的页码等状态,同时这条视频的收藏状态也需要更新, 但是从其他页面进来视频列表页面的时候不缓存这个页面,也就是进入的时候是视频列表页面的第一页 一句话总结一下: pageAList->pageADetail->pageAList, 缓存pageAList, 同时该视频的收藏状态如果发生变化需要更新, 其他页面->pageAList,

  • 关于Vue实现组件信息的缓存问题

    当我们在开发vue的项目过程中,避免不了在路由切换到其他component再返回后该组件数据会重新加载,处理这种情况我们就需要用到keep-alive来缓存vue的组件信息,使其不再重新加载. 在app.vue里 <keep-alive> <router-view></router-view> </keep-alive> 但是这种情况会对所有的组件进行缓存,不能达到单个组件缓存的效果. 那么我们给部分组件加上,实现方法如下: 在app.vue里 <!-

  • vue项目强制清除页面缓存的例子

    异常描述: 支付宝中内嵌h5项目(vue框架开发),前端重新打包上传之后访问页面会导致页面空白.页面tab点击异常之类异常情况,需要手动清除支付宝缓存才可以正常访问. 解决方案: 在HTTP协议中,只有后端返回 expires 或 Cache-Control:max-age=XXX, 前端才缓存. 但在浏览器中,默认会对 html css js 等静态文件.以及重定向进行缓存,如果在HEAD头中指定: <HEAD> <METAHTTP-EQUIV="Pragma"CO

  • vue实现提示保存后退出的方法

    假设有这样一个需求,用户在一个页面内编辑文字,但是并未点击保存并且跳转到了下一个路由.比较好的做法应该是给出一个提示-"您编辑的内容还未保存,是否确认退出?"用户如果点击"确定",那么不保存当前内容直接退出,用户如果点击"取消",则取消本次路由跳转,继续留在原来的页面. 尝试的错误做法 一开始的时候我是想着使用vuex结合vue router的beforeEach导航守卫来实现.代码如下: 首先在vuex中新增一个状态值-introduceSta

  • Vue2.0 实现页面缓存和不缓存的方式

    1.在app中设置需要缓存的div <keep-alive>//缓存的页面 <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>//不缓存的页面 2.在路由router.js中设置.vue页面是

  • 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 }; }, mount

  • vue实现登录时的图片验证码

    vue实现登录时的图片验证码

    本文实例为大家分享了vue实现登录时的图片验证码的具体代码,供大家参考,具体内容如下 效果图 一.新建vue组件components/identify/identify.vue <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></c

  • Spring Security中用JWT退出登录时遇到的坑

    Spring Security中用JWT退出登录时遇到的坑

    最近有个粉丝提了个问题,说他在Spring Security中用JWT做退出登录的时无法获取当前用户,导致无法证明"我就是要退出的那个我",业务失败!经过我一番排查找到了原因,而且这个错误包括我自己的大部分人都犯过. Session会话 之所以要说Session会话,是因为Spring Security默认配置就是有会话的,所以当你登录以后Session就会由服务端保持直到你退出登录.只要Session保持住,你的请求只要进入服务器就可以从 ServletRequest 中获取到当前的

  • vue实现登录时图形验证码

    vue实现登录时图形验证码

    本文实例为大家分享了vue实现登录时图形验证码的具体代码,供大家参考,具体内容如下 效果图: 点击图案可以切换字符 1.新建 Identify.vue 组件 <template>   <div>   <canvas       id="s-canvas"       :width="contentWidth"       :height="contentHeight"></canvas>   <

  • vue实现登录时滑块验证

    vue实现登录时滑块验证

    本文实例为大家分享了vue实现登录时滑块验证的具体代码,供大家参考,具体内容如下 1.效果图 2. 新建 SliderCheck.vue组件 <template> <!--  拖动验证-->   <div class="slider-check-box">     <div class="slider-check" :class="rangeStatus ? 'success' : ''">    

  • vue项目退出登录清除store数据的三种方法

    vue项目退出登录清除store数据的三种方法

    目录 方法一:(不友好,页面会白屏,不推荐使用) 方法二 : (不会出现白屏,推荐使用) 方法三 : vuex清除token (不会出现白屏,推荐使用) 总结 方法一:(不友好,页面会白屏,不推荐使用) 在退出登录的loginOut 方法里面: window.location.reload() 方法二 : (不会出现白屏,推荐使用) 利用v-if控制router-view,在根组件APP.vue中实现一个刷新方法 <template> <router-view v-if="is

  • 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

  • Asp.net中安全退出时清空Session或Cookie的实例代码

    概览: 网站中点击退出,如果仅仅是重定向到登录/出页面,此时在浏览器地址栏中输入登录后的某个页面地址如主页,你会发现不用登录就能访问.这种所谓的退出并不是安全的. 那么怎样做到安全退出呢? 那就是点击退出后清空相应的Session或Cookie. 清空Session的代码: Session.Clear(); Session.Abandon(); 清除Cookie的正确代码(假设Cookie名称为UserInfo): if (Request.Cookies["UserInfo"] !=

  • SpringBoot+Vue+Redis实现单点登录(一处登录另一处退出登录)

    SpringBoot+Vue+Redis实现单点登录(一处登录另一处退出登录)

    一.需求 实现用户在浏览器登录后,跳转到其他页面,当用户在其它地方又登录时,前面用户登录的页面退出登录(列如qq挤号那种方式) 二.实现思路 用户在前端填写用户信息登录后,后台接收数据先去数据库进行判断,如果登录成功,创建map集合,以用户id为键,token为值,先通过当前登录用户的id去获取token,如果token存在说明该用户已经登录过,调用redis以token为键删除上个用户的信息,调用方法生成新token,并将token存入map集合,将用户信息存入redis,并将token存入c

  • vue实现用户长时间不操作自动退出登录功能的实现代码

    一.需求说明 昨天后端开发人员让我实现一个网页锁屏,当时我一头雾水,问他为啥搞的跟安卓系统一样.他的回复是"看起来帅点". 首先我们梳理下逻辑,先来个简化版的,用户长时间未操作时,返回登录页 二.思路 使用 mouseover 事件来监测是否有用户操作页面,写一个定时器间隔特定时间检测是否长时间未操作页面,如果是,退出登陆,清除token,返回登录页 三.实现 [1]在util文件夹下创建一个storage.js封装localStorage方法 export default { set

随机推荐