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

Question

以下代码在IE7中弹出警报框显示 ls exist：

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

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

另外，由于我只使用了少量HTML5功能，并且加载大型脚本来检测这些功能的支持并不值得，因此我不想使用Modernizr。

- user967451

---

可能是检查HTML 5 localStorage的重复问题。 - BuZZ-dEE

Answer 1

你不必使用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;
    }
});

已更新为最新源代码

- Andreas

---

在try-catch块之前添加var mod = "test";，否则由于mod在那里未定义，这将始终失败。 - Mahn

如果本地存储空间不足，则可能会导致此操作失败。 - Patrick

说实话，这不是最好的测试，因为如果本地存储已满怎么办？localStorage可能会被支持，但只是在无法添加的状态下。 - DemiImp

注意，这将在其他窗口触发存储事件。 - Mark Swardstrom

@Andreas - 是的，我知道。这个测试修改了本地存储。如果你不想让它发生并只想测试支持性，其他解决方案可能是更好的选择。 - Mark Swardstrom

Answer 2

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

- Brandon Ferrara

---

typeof(Storage) !== void(0) 是更好的解决方案。 - Petja

@petjato，实际上应该是 if (Storage !== void(0))。 - Andrew

typeof 不是一个函数，而是一种语言运算符。为什么需要括号？ - r3wt

这似乎是在W3Schools网站上找到的内容的轻微变体。它也似乎不起作用。 - fujiiface

Safari的私密浏览模式不支持写入localStorage，但是这个检查对于该情况返回true。Andreas的解决方案可以处理这种情况。 - Deepak Joy Cheenath

Answer 3

这个函数可以正常工作：

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

来源：www.diveintohtml5.info

- juanra

---

已经过了很长时间。我知道，自从我读了这本书以来，这是最好的答案。但我的问题是为什么我们要检查一件事两次是否为空？ - Ali Saberi

我认为第一个 'localStorage' in window 检查该属性在 window 对象中是否存在（不是 'undefined'），而第二个 window['localStorage'] !== null 则检查该属性不为 NULL。 - juanra

通过简单地执行 window['localStorage'] == null 的非严格相等检查，这不是可以实现的吗？这涵盖了未定义和空值检查。 - Triynko

好的，我想是这样的。如果你检查´window['something'] == null´，结果是“true”，即使它是未定义的。尽管如此，出于清晰度的考虑，我会选择第一种方法。 - juanra

Answer 4

另外，我不想使用Modernizr，因为我只使用了一些HTML5功能，加载如此大的脚本来检测这些少数功能的支持并不值得。

为了减小Modernizr文件大小，请在http://modernizr.com/download/定制适合您需求的文件。仅基于localStorage的版本的Modernizr大小为1.55KB。

- Steve A

---

你好，欢迎来到 Stack Overflow！这篇内容更像是一个评论而不是对原问题的回答。我知道你现在还不能发表评论，但是获得50点声望并不难也不需要花费很多时间。 - Jesse

你可以做到 - 只需要再完成9个重复动作！好的，我已经点赞了，现在你有51个了。 - Simon_Weaver

我知道1.55kb并不算什么，但仅仅为了检查localStorage的支持而使用它似乎有些浪费。 - Tyler Biscoe

Answer 5

尝试使用 window.localStorage!==undefined：

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

你也可以使用typeof window.localStorage!=="undefined"，但上面的语句已经包含了这个判断。

- Danilo Valente

---

Safari可能具有localStorage，但如果处于私人模式下，则会引发错误（QuotaExceededError），因此在我看来，tr/catch是最好的选择。 - Endless

哦，我不知道。但是只有在尝试写入内容时才会抛出那个错误，对吧？ - Danilo Valente

实际上，仅仅检查window.localStorage属性（就像这个例子中所示）在Safari设置为阻止cookie和网站数据时会抛出错误。具体来说：SecurityError: DOM Exception 18: 尝试突破用户代理的安全策略。 - Aaronius

Safari的私密浏览模式不支持写入localStorage，但是这个检查对于该情况返回true。Andreas的解决方案处理了这种情况。 - Deepak Joy Cheenath

Answer 6

我在回答中没有看到这个，但我认为知道你可以轻松使用原生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功能时，您首先测试父对象，然后再测试您的代码使用的方法。

- Ovi Trif

Answer 7

使用try catch可以完成任务：

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

- Mohit Verma

Answer 8

请尝试：

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

- ErJab

Answer 9

if (window.localStorage){

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

}

- Darren

---

这里最佳答案遥遥领先。 - alex bennett

Answer 10

修改安德烈的答案并添加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>

- Ronnie Royston