JavaScript question: Onbeforeunload or Onunload?

Question

So I want to store some information in localstorage of a browser when the page is refreshed or the user exits the page for future use. I figured that I'd use some Javascript to detect the event and store the state of the page visit.

Now my predicament is: shall i use Onbeforeunload or Onunload method to accomplish this objective?

Thanks

Answer 1

Why not register it with both just to be on the safe side? Just have the listener do a check to see if the data's stored yet and exit early.

Here's a quick example using event properties:

window.onunload = window.onbeforeunload = (function(){

  var didMyThingYet=false;

  return function(){
    if (didMyThingYet) return;
    didMyThingYet=true;
    // do your thing here...
  }

}());

Or you could use attachEvent:

(function(){

  var didMyThingYet=false;

  function listener (){
    if (didMyThingYet) return;
    didMyThingYet=true;
    // do your thing here...
  }

  window.attachEvent("onbeforeunload", listener);
  window.attachEvent("onunload", listener);    

}());

Answer 2

The proper place to do it is onunload. onbeforenload is meant to be used when you may need to stop the user from leaving the page, like when there is unsaved data.

I would be weary of writing code to cover all cases because you're not willing to test all cases. If you do your research and find that's it's too complicated across browsers, yeah, go ahead and do as much as you can. However, I believe there is no problem with doing local storage onunload. I actually did run into a problem, trying to send information to the server onunload. That did not happen reliably across browsers so I did end up with an approach that used both unload and beforeunload, but only after due diligence.

So my suggestion is do it onunload, check all your browsers.