1

I recently figured out that the onbeforeunload event is not supported on IOS devices. I also did some research and tried other events like the pagehide event but it also didn't work. What I'm trying to achieve is to save some data in the local storage before leaving the page. It works fine for windows and android but not for IOS devices. This is the code:

window.onbeforeunload = function(e){
    save_something_in_local_storage();
};

I could also identify IOS devices with:

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

Trying other events like for example pagehide also won't work:

window.addEventListener("pagehide", function(evt){
   alert('pagehide');
}, false);

Anyone knows a workaround for IOS?

user2718671
  • 2,866
  • 9
  • 49
  • 86
  • 1
    XY: What exactly do you want to save, perhaps you can save the data at an earlier moment? I can imaging wanting to save for example some values of a text input, you can save this on input or blur. That way you're not depending on unsupported events. – Milanzor Jun 08 '17 at 12:25
  • @Milanzorg: Good Point! If there is no other way I'll have to do so. I'm trying to save an object with a timestamp and the index of the last opened tab. The problem is that the tab that is opened can be triggered through multiple events (a click on a navigation, adding an element, deleting an element etc.) - so with one function that checks that when leaving the page it would be easier... – user2718671 Jun 08 '17 at 12:30
  • Sounds like you need to make general function that toggles your tabs, in which you would then save your data to the localstorage. This way, instead of having multiple places that toggle your tabs, you have 1 function that does it for you. Obviously I make it sound easy and I don't know how complicated your code is, but I would make 1 function that is called from all the other places. – Milanzor Jun 08 '17 at 12:46
  • Did you actually try to save the data? It could be a "security" thing that alerts aren't executed on page leave. Try using logs or better even breakpoints for debugging purposes. In case the code is only representative, I have not idea at the moment – Julian F. Weinert Sep 04 '18 at 17:35
  • @JulianF.Weinert: I don't remember anymore but if I would have used console.log I wouldn't have seen it when page unloads, that's why I tried alert. You could be right about that alert security issue but I solved it as Milanzor proposed. That worked reliably in all Browsers and devices I tested it. I think I tried to access the localstorage data when using pagehide without the alert but it was not available. Or it worked just in one browser - Safari or Chrome IOS. However it didn't work somehow... – user2718671 Sep 05 '18 at 08:31
  • Interesting. As a sidenote, the (at least Safaris) web console allows to persist logs over pageloads, so you should be able to see the log after reload :) @Milanzor could you make an anwser? That way the OP can accept and we have an accepted answer for future fellows :) – Julian F. Weinert Sep 07 '18 at 23:00

2 Answers2

0

Try to save data after focusout event (if you have input). And after success saving, clean up localstorage

COAX_Software
  • 46
  • 2
0

pagehide works correctly for iOS devices. The problem is in the alert call, see https://stackoverflow.com/a/9325742/3386279. Just try to save your data in localStorage instead.

mcmimik
  • 1,389
  • 15
  • 32