Local storage and Internet Explorer 9 adventures

Question

I have interesting issue in Internet Explorer 9 using localStorage. I use client-side localization in my web project using i18next library and as a localization storage we decided to use localStorage. We are loading all localization at the user first visit(whole localization for one language ~ 450kb). All is working well in all browser, except Internet explorer 9. After some time and switching between languages I start receiving error - "SCRIPT5022: DOM Exception: QUOTA_EXCEEDED_ERR (22)" , when it trying to load localization from server-side. When I try - localStorage.remainingSpace it returns: 120776

However when i try to look what is stored in localStorage with a command - JSON.stringify(localStorage) it returns - "{}" . So nothing is stored in localStorage however it writes that only 120kb is free. When I try on any other web site, for the command - localStorage.remainingSpace it shows - 5000000 . Also localStorage.clear() is not helping to stop receiving that message - "SCRIPT5022: DOM Exception: QUOTA_EXCEEDED_ERR (22)"

The question is - 'Why internet explorer 9 thinks that localStorage is almost full while it don't contain any data?'

Thanks for any advance.

Answer 1

know how frustrating IE can be. I ran into a similar issue.

Try this this jquery plugin . Also see if this IE9 issue matches your use case The plugin itself tries various fallbacks short of setting an actual cookie. They integrate several persistence mechanisms in a seamless API regardless of browser, as long as it's on their supported list, it'll work, within the size limitation.

[If 450kb does not fit, try to create a server-backed fallback that actively fetches required keys that are missing from the local storage so that you do not transfer the entire 450k dictionary.]

Best of luck!