关闭浏览器窗口的时候,如何清空localStorage的数据

本文介绍了如何在JavaScript和Vue.js环境中,当浏览器窗口关闭时自动清空localStorage的数据。对于单页面应用,可以在App.vue中监听事件;而对于多页面应用,提供了两种方案,一种是在每个页面的mounted方法中注册事件,另一种是利用cookie作为哨兵,通过检测cookie来决定是否清除localStorage。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、对于单页面应用,例如vue等

window.onbeforeunload监听的方法放在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
      };
    },
    methods: {
 
    },
    mounted(){
      // 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据
      window.onbeforeunload = function (e) {
        var storage = window.localStorage;
        storage.clear()
      }
    }
 
  };
</script>
 

二、对于多页面应用

1、第一种方案(对于vue)

在每一个页面同理只要在mounted方法中,注册这个事件即可

2、第二种方案(对于原生js)

使用cookie作为哨兵,因为cookie默认在你关闭浏览器时会自动消失,我们就在网页打开时判断有没有cookie,如果没有,我们就清除localStorage缓存,然后再设置一个cookie,这样你不关闭浏览器,cookie一直存在,也就是你的localStorage数据会一直存在。

一个例子

//设置cookie    
function setCookie(name, value, seconds) {
  seconds = seconds || 0;   //seconds有值就直接赋值,没有为0    
  var expires = "";
  if (seconds != 0) {      //设置cookie生存时间    
    var date = new Date();
    date.setTime(date.getTime() + (seconds * 1000));
    expires = "expires=" + date.toGMTString();
  }
  document.cookie = name + "=" + escape(value) + expires + "; path=/";   //转码并赋值    
}
function setInof(key, value) {
  localStorage.setItem(key, value);
  setCookie(key,value)//存储localStorage的同时,也存储一个cookie来监听
}
 //取得cookie    
  function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';'); //把cookie分割成组    
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i]; //取得字符串    
      while (c.charAt(0) == ' ') { //判断一下字符串有没有前导空格    
        c = c.substring(1, c.length); //有的话,从第二位开始取    
      }
      if (c.indexOf(nameEQ) == 0) { //如果含有我们要的name    
        return unescape(c.substring(nameEQ.length, c.length)); //解码并截取我们要值    
      }
    }
    return false;
  }
 if(!getCookie('Token')){
   //清除
    localStorage.clear();
  }
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值