local storage in IE9 fails when the website is accessed directly from the file system

Question

Both statements window['localStorage'] and window.localStorage

are undefined when accessing the url "file:///C:/index.html"

Is localStorage off limits when running websites on the filesystem?

PS. I'm running the website on a Windows 7 phone hosting the website in isolatedStorage.

Answer 1

Yeah, IE9 doesn't support localStorage for local files. Not in any official documentation that I can find, but the same issue is described in this blog.

You'll have to either host the website externally, or find some other method of persisting data. [Support for HTML5-style local storage is still in beta in many browsers, anyway. Especially for pages on the local filesystem.]

You could try userdata behaviors, which is a pre-W3C solution developed by Microsoft for Internet Explorer. Not sure if it supports local filesystems, though. Links:

1. http://www.javascriptkit.com/javatutors/domstorage2.shtml
2. http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx

References:

1. https://bugzilla.mozilla.org/show_bug.cgi?id=507361
2. https://stackoverflow.com/a/7377302/1122351

Answer 2

As an added bonus, IE will swat down any attempt to work around this issue.

The sane thing to do would be to stub out your own dummy localStorage so that at least your thing doesn't break when loading it from the local FileSystem:

if (document.all && !window.localStorage)
{
    window.localStorage = {};
    window.localStorage.removeItem = function () { };
}

Any guesses as to what alert(window.localStorage) will pop up after running that? Did you guess "undefined"???

Thanks, IE! Now there is actually one ugly hack we can do to make this work. Since IE won't let you reuse its reserved word "localStorage", we'll just move the whole thing over to someplace else:

window.localStorageAlias = window.localStorage;
if (document.all && !window.localStorage)
{
    window.localStorageAlias = {};
    window.localStorageAlias.removeItem = function () { };
}

So now, anywhere you'd normally say localStorage['beans'] = 7, you just do localStorageAlias['beans'] = 7 and you're back in business. Naturally, IE won't actually store anything there between sessions when running from the local filesystem. But at least it won't break.

For extra credit, you can fix the above code to swap in some form of persistent storage that IE will actually use when running locally.

Answer 3

I have the same problem and found two plugins with fallback solutions:

https://github.com/andris9/jStorage

HTML5 Local Storage fallback solutions

I like the first one more because it is smaller and simpler.