Destroy in beforedestroy invalid value in localstorage

beforeDestroy Medium destruction localStorage Invalid data in

Purpose ： Delete when closing the window localStorage Data in

Method 1：beforeDestroy Delete in

  beforeDestroy() {
    localStorage.removeItem("info");
  }

Want to delete when the component is destroyed localStorage The variables in the , It turned out to be invalid

beforeDestroy It will not be executed when the page is refreshed , But it will be executed when the page jumps （this.$router.push,this.$router.replace）, But it will not be executed when the window is closed

When it's time to force the window to close , Browsers will be in js The execution of the gap immediately aborts all subsequent js perform （vue Of beforeDestroy No exception ), And close the window .

Method 2：unload Delete

  mounted() {
    window.addEventListener("unload", () => {
      localStorage.removeItem("hello");
    });
  },

It can achieve the effect of deletion , But there's a problem , Even when the page is refreshed , This is not the desired result

Finally, it was changed to put sessionStorage It's in , Or back to the original idea

onload onunload beforeunload Execution time of

When the page is loaded, only onload
Execute... Before closing the page onbeforeunload, Last onunload
Execute... Before page refresh onbeforeunload, then onunload, Last onload