After a good few hours trying to debug a web app in Mobile Safari here at kc web design kent we finally worked out that having private browsing turned on in the Safari settings was causing javascript and local storage to not work. Safari mobile seems to deal with private browsing differently to other browsers and it actually stops any kind of local storage from being set where as Chrome still allows a certain amount of storage to be accessed.

To warn users that they have private browsing on we can do a little check with javascript…

var testKey = 'qeTest', storage = window.sessionStorage;
 
 try {
 // Try and catch quota exceeded errors
 storage.setItem(testKey, '1');
 storage.removeItem(testKey);
 } catch (error) {
 if (error.code === DOMException.QUOTA_EXCEEDED_ERR && storage.length === 0)
 alert('Please make sure you have private browsing turned off in your Safari settings to use this website');
 else throw error;
 }

 

This will check whether local storage can be set and if not warn the user that they have private browsing turned on. Hopefully this will help anyone else that comes up against this problem.