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

以下代码提示ls exist于IE7中：

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

IE7并不真正支持本地存储，但这仍然提醒它。 也许这是因为我在使用IE9开发工具在IE7浏览器和文档模式下使用IE9。 或者，也许这只是testingLS是否受支持的错误方法。 什么是正确的方式？

另外，我不想使用Modernizr，因为我只使用了几个HTML5function，并且加载一个大脚本不值得，只是为了检测对这些东西的支持。

Answer 1

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

github上的modernizr
testinglocalStorage

 // 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; } }); 

更新当前的源代码

Answer 2

 if(typeof Storage !== "undefined") { // Yes! localStorage and sessionStorage support! // Some code..... } else { // Sorry! No web storage support.. } 

Answer 3

另外，我不想使用Modernizr，因为我只使用了几个HTML5function，并且加载一个大脚本不值得，只是为了检测对这些东西的支持。

要减lessModernizr文件大小，请在http://modernizr.com/download/上定制文件以适应您的需求。; Modernizr的本地存储版本只有1.55KB。

Answer 4

这个function工作正常：

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

资料来源： http://www.diveintohtml5.info

Answer 5

试试window.localStorage!==undefined ：

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

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

Answer 6

我没有看到它的答案，但我认为这是很好的知道，你可以轻松地使用香草的JS或jQuery进行这样简单的testing，而Modernizr帮助了很多，没有它干净的解决scheme。

如果你使用jQuery ，你可以这样做：

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

或者，用纯香草JavaScript ：

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

然后，你只需要做一个IF来testing支持：

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

所以整个想法是，只要你需要JavaScript特性，你首先会testing父对象，然后testing你的代码使用的方法。

Answer 7

尝试赶上将做的工作：

  try{ localStorage.setItem("name",name.value); localStorage.setItem("post",post.value); } catch(e){ alert(e.message); } 

Answer 8

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

Answer 9

尝试：

 if(typeof window.localStorage != 'undefined') { } 

Answer 10

修改Andrea的答案来添加一个getter使其更易于使用。 下面你简单地说： 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>