Fix localStorage for Windows 8.1 IE11 desktop mode

In IE11 windows 8 call to window.localStorage was throwing out an access denied error.  Using try and catch manages the issue and allows the script to execute in IE 11 in desktop mode.

I think it is a problem with IE11 rather than the way Silverstripe is implementing the preview via an iframe from what I have been reading. http://blogs.msdn.com/b/ieinternals/archive/2009/09/16/bugs-in-ie8-support-for-html5-postmessage-sessionstorage-and-localstorage.aspx.  It seems that the way IE11 deals with localStorage is broken in certain cases but I am not 100% certain of the cause yet as I have not been able to find a definitive answer.  I only noticed it was a problem when a new client said they couldn't view the admin screen properly in IE11.  I took a look in IE11 and I was experiencing the same problem which makes the admin interface layout screw up and the preview doesn't work due the error mentioned in the first post.

Instead of the original code I submitted I have amended it and added an additional function to test more robustly to see if localStorage is available and can be accessed properly.  It is a copy of the code on a blog post Mathias Bynens has written about detecting if localStorage is available and can be used: https://mathiasbynens.be/notes/localstorage-pattern

I have added a console.warn as you suggested if localStorage is not available so that at least you get a warning if localStorage tests fail.

I have tested this on Windows 8.1: Firefox, Chrome & Mac: Firefox, Safari, Chrome and it seems to work as expected.  On IE11 it displays the admin area correctly now but obviously doesn't save the preview settings between page loads if localStorage is not available.
This commit is contained in:
James Bolitho 2015-02-19 21:43:20 +00:00 committed by Will Morgan
parent 2336ea8f66
commit 0cb98bcce2

View File

@ -179,18 +179,14 @@
* Store the preview options for this page.
*/
saveState : function(name, value) {
if(!window.localStorage) return;
window.localStorage.setItem('cms-preview-state-' + name, value);
if(this._supportsLocalStorage()) window.localStorage.setItem('cms-preview-state-' + name, value);
},
/**
* Load previously stored preferences
*/
loadState : function(name) {
if(!window.localStorage) return;
return window.localStorage.getItem('cms-preview-state-' + name);
if(this._supportsLocalStorage()) return window.localStorage.getItem('cms-preview-state-' + name);
},
/**
@ -276,6 +272,23 @@
this._super();
},
/**
* Detect and use localStorage if available. In IE11 windows 8.1 call to window.localStorage was throwing out an access denied error in some cases which was causing the preview window not to display correctly in the CMS admin area.
*/
_supportsLocalStorage: function() {
var uid = new Date;
var storage;
var result;
try {
(storage = window.localStorage).setItem(uid, uid);
result = storage.getItem(uid) == uid;
storage.removeItem(uid);
return result && storage;
} catch (exception) {
console.warn('localStorge is not available due to current browser / system settings.');
}
},
/**
* Set the preview to unavailable - could be still visible. This is purely visual.