ブラウザウィンドウを閉じるときにlocalStorageデータをクリアする方法

1.vueなどのシングルページアプリケーションの場合。

window.onbeforeunloadApp.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用）

各ページで同じように、このイベントをマウントされたメソッドに登録するだけです。

2. 2番目のソリューション（ネイティブjs用）

デフォルトではブラウザを閉じるとCookieが自動的に消えるので、Cookieを番兵として使用します。Webページを開いたときに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();
  }