Browser support
The web storage feature is supported by all new versions of the latest browsers, including Firefox, Google Chrome, Safari, Opera, and Microsoft® Windows® Internet Explorer® 8+. Unfortunately, Internet Explorer 7 and earlier do not support web storage. Table 1 shows the versions of each desktop browser that support HTML5 web storage.
Table 1. Desktop browser support for HTML5 web storage
Chrome | Firefox | Safari | Opera | Internet Explorer |
---|---|---|---|---|
4+ | 4+ | 4+ | 11+ | 8+ |
Mobile browsers, aside from Opera Mini, also provide support for HTML5 web storage. Table 2 shows the versions of each mobile browser that supports HTML5 web storage.
Table 2. Mobile browser support for HTML5 web storage
iOS | Android | Opera Mini | Opera Mobile |
---|---|---|---|
5+ | 3+ | NA | 11+ |
The browser support for HTML5 web storage is pretty impressive. However, older browsers require some sort of browser check for web storage support before you attempt to use it. Checking a browser for web storage support is easy. You can use a simple conditional statement to see if the HTML5 storage object is defined. If it is defined, it’s safe to proceed with the web storage scripting. If it is undefined, you must use an alternative method, such as JavaScript cookies, if data storage is necessary. Listing 1 shows an example of a simple way to check the browser for the Storage
object.
if(typeof(Storage)!== "undefined") { // Web storage is supported } else { // Web storage is NOT supported }
If a browser doesn’t support web storage, you can create a custom web storage object using either JavaScript cookies or an existing library such as AmplifyJS. AmplifyJS is a set of components designed to solve common web application problems, including web storage support in certain browsers, with a simplistic API. AmplifyJS addresses the issue with the amplify.store
wrapper to handle persistent client-side storage, which supports Internet Explorer 5+, Firefox 2+, Safari 4+, Chrome, Opera 10.5+, iOS 2+, and Android 2+. The library also provides a consistent API to handle storage cross-browser; you don’t have to write different code based on the browser in question. If the browser supports HTML5 web storage, AmplifyJS uses the latest storage techniques. If the browser doesn’t support HTML5 web storage, AmplifyJS degrades to support it without that function. See Resources to learn more about AmplifyJS and the API for its storage wrapper.