determine whether Web Storage is supported or not

Question

I need to verify that Web Storage API is supported and available (it may be disabled due to security issues).

So, I thought it would suffice to check whether the type sessionStorage or localStorage is defined or not:

if (typeof sessionStorage != 'undefined')
{
    alert('sessionStorage available');
}
else
{
    alert('sessionStorage not available');
}

However, I was wondering if it could be possible that the type exists, but I wouldn't been able to use the Web Storage API anyway.

Remarks: I know Firefox will throw a security error if cookies are disabled and sessionStorage or localStorage are accessed.

Answer 1

So, because Modernizr.localstorage respectively Modernizr.sessionstorage will return true while Firefox might be used with disabled Cookies (which will lead into an security error) or any other proprietary (unexpected) behavior could occur: I've written my own webStorageEnabled function which seems to work very well.

function cookiesEnabled()
{
    // generate a cookie to probe cookie access
    document.cookie = '__cookieprobe=0;path=/';
    return document.cookie.indexOf('__cookieprobe') != -1;
}

function webStorageEnabled()
{
    if (typeof webStorageEnabled.value == 'undefined')
    {
        try
        {
            localStorage.setItem('__webstorageprobe', '');
            localStorage.removeItem('__webstorageprobe');
            webStorageEnabled.value = true;
        }
        catch (e) {
            webStorageEnabled.value = false;
        }
    }

    return webStorageEnabled.value;
}


// conditional

var storage = new function()
{
    if (webStorageEnabled())
    {
        return {
            local:   localStorage,
            session: sessionStorage
        };
    }
    else
    {
        return {
            local: cookiesEnabled() ? function()
            {
                // use cookies here
            }() : null,

            session: function()
            {
                var data = {};

                return {
                    clear: function () {
                        data = {};
                    },

                    getItem: function(key) {
                        return data[key] || null;
                    },

                    key: function(i)
                    {
                        var index = 0;
                        for (var value in data)
                        {
                            if (index == i)
                                return value;
                            ++index;
                        }
                    },

                    removeItem: function(key) {
                        delete data[key];
                    },

                    setItem: function(key, value) {
                        data[key] = value + '';
                    }
                };
            }()
        };
    }
}

Hope this will be useful for someone too.