20

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
pratyk
  • 303
  • 1
  • 3
  • 7
  • see browser support of `onbeforeunload` WindowEventHandler on https://developer.mozilla.org/en-US/docs/WindowEventHandlers.onbeforeunload#Browser_compatibility – Adriano Sep 11 '14 at 07:11
  • see browser support of `onunload` WindowEventHandler on https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers.onunload#Browser_compatibility (Note that the browser versions are not specified in this doc tho) – Adriano Sep 11 '14 at 07:12
  • related http://stackoverflow.com/questions/158673/onbeforeunload-support-detection – Adriano Sep 11 '14 at 07:16
  • MSDN says `onbeforeunload` is supported on IE9+ http://msdn.microsoft.com/en-us/library/ff974336(v=vs.85).aspx – Adriano Sep 11 '14 at 07:23
  • After a successful testing on IE8, and noticing that Mozilla says `onbeforeunload` is supported on IE4+ vs MSDN says IE9+. I suppose it's only because Microsoft is not supporting IE8 & below (hence it does not even show IE8 & below in the event's IE version support table), see http://windows.microsoft.com/en-gb/windows/end-support-help – Adriano Sep 11 '14 at 07:43

4 Answers4

20

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);    

}());
Dagg Nabbit
  • 75,346
  • 19
  • 113
  • 141
  • 1
    That sounds like a doable idea to cover all bases. It'd be grand if you could point me to a snippet or a resource as far as the event listener and exiting early goes. – pratyk Sep 23 '10 at 05:37
  • thanks for the snippet. I tried it out across windows and mac os chrome/firefox and it seemed to cover all bases. A little more testing for Opera and IE9 beta should get me running. – pratyk Sep 24 '10 at 12:09
8

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.

Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217
  • +1 Tried it with both and Chrome raises an ugly dialog with `onbeforeunload` if you call `indexedDB.deleteDatabase` inside of it, but it is happy to do the same call inside `onunload`. – Carl Smith Sep 10 '14 at 00:08
0

I believe that Onbeforeunload is a safe bet. It is possible for browser to not execute onunload script completely - for example, if you have alert in onunload, chrome would not show if you close the window.

VinayC
  • 47,395
  • 5
  • 59
  • 72
  • 3
    I tested Chrome v. 5 and 6 on Mac OS X and it does alert on OnUnload. I wish there was a matrix/chart that would list the DOM support for each browser. THanks. – pratyk Sep 23 '10 at 05:34
0

From my experience: use onunload since Opera does not support the other event. Yes, I know... Opera... but still :)

Milan Aleksić
  • 1,415
  • 15
  • 33