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

一、对于单页面应用，例如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();
  }