javascript - 确定是否支持 Web Storage

Question

我需要验证 Web Storage API 是否受支持且可用（它可能由于安全问题而被禁用）。

所以，我认为检查是否定义了 sessionStorage 或 localStorage 类型就足够了：

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

但是，我想知道该类型是否存在，但无论如何我都无法使用 Web Storage API。

备注：我知道如果 cookie 被禁用并且 sessionStorage 或 localStorage 被访问，Firefox 会抛出一个安全错误。

Answer 1

为什么不使用Modernizr库来检测是否支持本地存储？浏览器之间的任何差异都会为您处理，然后您可以使用如下代码：

if (Modernizr.localstorage) {
    // browser supports local storage
} else {
    // browser doesn't support local storage
}

Answer 2

我认为您的原始代码走在了正确的轨道上，无需太花哨。

在您的代码中使用没有额外依赖项的KISS 原则：

var storageEnabled = function() {
    try {
        sessionStorage.setItem('test-key','test-value');
        if (sessionStorage.getItem('test-key') == 'test-value'){
            return true;
        }
    } catch (e) {};
    return false;
};

alert(storageEnabled() ? 'sessionStorage available' : 'sessionStorage not available');

Answer 3

try{
    ssSupport = Object.prototype.toString.call( sessionStorage ) === "[object Storage]";
}
catch(e){
    ssSupport = false;
}

Answer 4

因此，因为在 Firefox 可能与禁用的 Cookie（这将导致安全错误）或任何其他专有（意外）行为一起使用Modernizr.localstorage时 Modernizr.sessionstorage，将返回 true：我编写了自己的webStorageEnabled函数，它似乎工作得很好。

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 + '';
                    }
                };
            }()
        };
    }
}

希望这对某人也有用。

Answer 5

我的版本（因为在 IE 8 中运行的 IE 9 更多在 Intranet 站点上已损坏）。

if (typeof (Storage) != "undefined" && !!sessionStorage.getItem) {

}

添加 setObject 以允许存储对象的更长版本：

var sstorage;

if (typeof (Storage) != "undefined" && !!sessionStorage.getItem) {
    Storage.prototype.setObject = function (key, value) {
        this.setItem(key, JSON.stringify(value));
    };

    Storage.prototype.getObject = function (key) {
        return JSON.parse(this.getItem(key));
    };
    if (typeof sessionStorage.setObject == "function") {
        sstorage = sessionStorage;
    }
    else {
        setupOldBrowser();
    }
}
else {
    setupOldBrowser();
}


function setupOldBrowser() {
    sstorage = {};
    sstorage.setObject = function (key, value) {
        this[key] = JSON.stringify(value);
    };
    sstorage.getObject = function (key) {
        if (typeof this[key] == 'string') {
            return JSON.parse(this[key]);
        }
        else {
            return null;
        }
    };

    sstorage.removeItem = function (key) {
        delete this[key];
    };
}

Answer 6

这是我使用会话存储的方法（如果可用），如果不可用，请使用 cookie..

var setCookie; 
var getCookie;

var sessionStorageSupported = 'sessionStorage' in window 
                                   && window['sessionStorage'] !== null;

if (sessionStorageSupported) {
    setCookie = function (cookieName, value) {
        window.sessionStorage.setItem(cookieName, value);
        return value; //you can introduce try-catch here if required
    };
    getCookie = function (cookieName) {
        return window.sessionStorage.getItem(cookieName);
    };
}
else {
    setCookie = function (cookieName, value) {
        $.cookie(cookieName, value);
        return value; // null if key not present
    };
    getCookie = function(cookieName) {
        console.log("using cookies");
        return $.cookie(cookieName);
    };
}