如何检测浏览器是否支持HTML5本地存储

84

ls existIE7中的以下代码警报：

if(window.localStorage) {
    alert('ls exists');
} else {
    alert('ls does not exist');
}

IE7并不真正支持本地存储，但这仍然可以警告它。也许这是因为我在IE7浏览器中使用IE9，并在使用IE9开发人员工具的文档模式下使用。也许这只是测试LS是否受支持的错误方法。正确的方法是什么？

另外，我也不想使用Modernizr，因为我仅使用了几个HTML5功能，并且仅加载单个脚本来检测对这几件事的支持是不值得的。

javascript  html 
— TK123
source
— BuZZ-dEE

Answers:

99

您不必使用modernizr，但可以使用其方法来检测是否localStorage受支持

github上的modernizr
测试localStorage

// In FF4, if disabled, window.localStorage should === null.

// Normally, we could not test that directly and need to do a
//   `('localStorage' in window) && ` test first because otherwise Firefox will
//   throw bugzil.la/365772 if cookies are disabled

// Also in iOS5 & Safari Private Browsing mode, attempting to use localStorage.setItem
// will throw the exception:
//   QUOTA_EXCEEDED_ERRROR DOM Exception 22.
// Peculiarly, getItem and removeItem calls do not throw.

// Because we are forced to try/catch this, we'll go aggressive.

// Just FWIW: IE8 Compat mode supports these features completely:
//   www.quirksmode.org/dom/html5.html
// But IE8 doesn't support either with local files

Modernizr.addTest('localstorage', function() {
    var mod = 'modernizr';
    try {
        localStorage.setItem(mod, mod);
        localStorage.removeItem(mod);
        return true;
    } catch(e) {
        return false;
    }
});

用当前源代码更新

— 安德烈亚斯
source
3
var mod = "test";在try-catch块之前添加，否则将始终失败，因为在那未定义mod。
— Mahn 2013年
5
如果本地存储空间不足，这可能会失败。
— Patrick
1
老实说，这不是最好的测试，因为如果本地存储刚刚满怎么办？可以支持localStorage，但只能处于无法添加的状态。
— DemiImp '16
2
请注意，这将触发其他窗口中的存储事件
— 马克·斯沃德斯特伦
2
@Andreas-是的，我知道。此测试将修改本地存储。如果您不希望这种情况发生，而只想测试支持，则其他解决方案可能是更好的选择。
— Mark Swardstrom '17
44 
if(typeof Storage !== "undefined")
  {
  // Yes! localStorage and sessionStorage support!
  // Some code.....
  }
else
  {
  // Sorry! No web storage support..
  }
— 布兰登·费拉拉
source
7
typeof(Storage) !== void(0)是更好的解决方案
— Petja 2014年
2
@petjato实际上应该是if (Storage !== void(0))
— Andrew
4
typeof不是功能，而是语言运算符。为什么加上括号？
— r3wt 2015年
1
这似乎与W3Schools网站上的内容略有不同。它似乎也不起作用。
— fujiiface 2015年
2
Safari中的私有浏览模式不支持写入localStorage，但是在这种情况下，此检查返回true。Andreas的解决方案可以处理这种情况。
— Deepak Joy
16

此功能工作正常：

function supports_html5_storage(){
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch(e) {
        return false;
    }
}

资料来源：www.diveintohtml5.info

— 胡安拉
source
1
已经过去了很长时间。而且我知道，这是自阅读本书以来的最佳答案。我的问题是，为什么我们要两次检查一件事是否为NULL？
— 阿里·萨贝里
我认为第一个'localStorage' in window检查该属性是否存在于window对象中（不是“未定义”），第二个window['localStorage'] !== null检查该属性是否为NULL。
— juanra
1
仅通过对window ['localStorage'] == null进行非严格的相等性检查是否可以实现？这涵盖了未定义和空检查。
— Triynko '16
好吧，我猜是这样。如果您检查“ window ['something'] == null”，则即使未定义结果也为“ true”。尽管如此，为清楚起见，我将选择第一种方法。
— juanra
15

另外，我也不想使用Modernizr，因为我仅使用了几个HTML5功能，并且仅加载单个脚本来检测对这几件事的支持是不值得的。

要减小Modernizr文件的大小，请自定义http://modernizr.com/download/中的文件以适合您的需求。Modernizr的仅本地存储版本为1.55KB。

— 史蒂夫·阿
source
3
嗨，欢迎来到Stack Overflow！这听起来似乎更像是对原始问题的评论而不是答案。我知道您还不能发表评论，但是达到50个代表并不困难也不费时。
— Jesse 2013年
1
您可以做到-仅剩9个代表！好的，我投票赞成，所以现在您有51个
— Simon_Weaver
我意识到1.55kb算不了什么，但仅检查localStorage支持似乎还是过头了。
— Tyler Biscoe
9

尝试window.localStorage!==undefined：

if(window.localStorage!==undefined){
    //Do something
}else{
    alert('Your browser is outdated!');
}

您也可以使用typeof window.localStorage!=="undefined"，但是上面的语句已经做到了

— 达尼洛·瓦伦特（Danilo Valente）
source
2
Safari可能具有localStorage，但如果处于私有模式（QuotaExceededError），则可能会出错，因此tr / catch是最佳选择恕我直言
— Endless
1
嗯，我不知道。但这只会在尝试编写内容时抛出该错误，对吗？
— Danilo Valente 2014年
1
实际上，仅在设置Safari来阻止cookie和网站数据时，仅检查window.localStorage属性（如本示例所示）就会引发错误。具体来说：SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.
— Aaronius
Safari中的私有浏览模式不支持写入localStorage，但是在这种情况下，此检查返回true。Andreas的解决方案可以处理这种情况。
— Deepak Joy
7

我没有在答案中看到它，但我想很高兴知道您可以轻松地使用Vanilla JS或jQuery进行此类简单测试，而Modernizr可以提供很多帮助，但没有它，它们是干净的解决方案。

如果使用jQuery，则可以执行以下操作：

var _supportsLocalStorage = !!window.localStorage
    && $.isFunction(localStorage.getItem)
    && $.isFunction(localStorage.setItem)
    && $.isFunction(localStorage.removeItem);

或者，使用纯Vanilla JavaScript：

var _supportsLocalStorage = !!window.localStorage
    && typeof localStorage.getItem === 'function'
    && typeof localStorage.setItem === 'function'
    && typeof localStorage.removeItem === 'function';

然后，您只需做一个IF来测试支持：

if (_supportsLocalStorage) {
    console.log('ls is supported');
    alert('ls is supported');
}

因此，整个想法是，每当需要JavaScript功能时，都应先测试父对象，然后再测试代码使用的方法。

— 奥维·特里夫
source
1

尝试： 

if(typeof window.localStorage != 'undefined') {
}
— ErJab
source
1 
if (window.localStorage){

   alert('localStorage is supported');
   window.localStorage.setItem("whatever", "string value");

}
— 达伦
source
跨越式发展的最佳答案
— 亚历克斯·本内特
1

修改Andrea的答案以添加吸气剂使其更易于使用。在下面，您只需说：if(ls)...

  var ls =  {
    get: function () { 
      var test = 'test';
      try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
      } catch(e) {
        return false;
      }
    }
  };


var ls =  {
  get: function () { 
    var test = 'test';
    try {
      localStorage.setItem(test, test);
      localStorage.removeItem(test);
      return true;
    } catch(e) {
      return false;
    }
  }
};

function script(){
  if(ls){
    alert('Yes');
  } else {
    alert('No');
  }
}
<button onclick="script()">Local Storage Support?</button>
展开摘要

— 罗尼·罗斯顿
source
0

我知道我参加聚会有点晚了，但是我准备了一些有用的功能，并放入了一个名为“ manage_storage.js”的文件中。我希望它们对你们一样有用，因为它们为我服务很好。

请记住：您要查找的功能（回答此问题）是isLclStorageAllowed。

因此，事不宜迟，这是我的代码：

/* Conditional Function checks a web browser for 'session storage' support. [BEGIN] */

if (typeof isSessStorageAllowed !== 'function')
    {
        function isSessStorageAllowed()
            {
                if (!!window.sessionStorage && typeof sessionStorage.getItem === 'function' && typeof sessionStorage.setItem === 'function' && typeof sessionStorage.removeItem === 'function')
                    {
                        try
                            {
                                var cur_dt = new Date();
                                var cur_tm = cur_dt.getTime();
                                var ss_test_itm_key = 'ss_test_itm_' + String(cur_tm);
                                var ss_test_val = 'ss_test_val_' + String(cur_tm);

                                sessionStorage.setItem(ss_test_itm_key, String(ss_test_val));

                                if (sessionStorage.getItem(ss_test_itm_key) == String(ss_test_val))
                                    {
                                        return true;
                                    }
                                else
                                    {
                                        return false;
                                    };

                                sessionStorage.removeItem(ss_test_itm_key);
                            }
                        catch (exception)
                            {
                                return false;
                            };
                    }
                else
                    {
                        return false;
                    };
            };
    };

/* Conditional Function checks a web browser for 'session storage' support. [END] */

/* Conditional Function checks a web browser for 'local storage' support. [BEGIN] */

if (typeof isLclStorageAllowed !== 'function')
    {
        function isLclStorageAllowed()
            {
                if (!!window.localStorage && typeof localStorage.getItem === 'function' && typeof localStorage.setItem === 'function' && typeof localStorage.removeItem === 'function')
                    {
                        try
                            {
                                var cur_dt = new Date();
                                var cur_tm = cur_dt.getTime();
                                var ls_test_itm_key = 'ls_test_itm_' + String(cur_tm);
                                var ls_test_val = 'ls_test_val_' + String(cur_tm);

                                localStorage.setItem(ls_test_itm_key, String(ls_test_val));

                                if (localStorage.getItem(ls_test_itm_key) == String(ls_test_val))
                                    {
                                        return true;
                                    }
                                else
                                    {
                                        return false;
                                    };

                                localStorage.removeItem(ls_test_itm_key);
                            }
                        catch (exception)
                            {
                                return false;
                            };
                    }
                else
                    {
                        return false;
                    };
            };
    };

/* Conditional Function checks a web browser for 'local storage' support. [END] */

/* Conditional Function checks a web browser for 'web storage' support. [BEGIN] */

/* Prerequisites: 'isSessStorageAllowed()', 'isLclStorageAllowed()' */

if (typeof isWebStorageAllowed !== 'function')
    {
        function isWebStorageAllowed()
            {
                if (isSessStorageAllowed() === true && isLclStorageAllowed() === true)
                    {
                        return true;
                    }
                else
                    {
                        return false;
                    };
            };
    };

/* Conditional Function checks a web browser for 'web storage' support. [END] */
— 小詹姆斯·安德森（James Anderson Jr.）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.