Как определить, поддерживает ли браузер HTML5 Local Storage

Следующий код предупреждает ls exist в IE7:

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

IE7 действительно не поддерживает локальное хранилище, но это все еще предупреждает об этом. Возможно, это связано с тем, что я использую IE9 в браузерах IE7 и режимах документа, используя инструмент разработчика IE9. Или, возможно, это неправильный способ проверить, поддерживается ли LS. Каков правильный путь?

Также я не хочу использовать Modernizr, так как я использую только несколько функций HTML5, а загрузка большого script не стоит просто обнаружить поддержку этих нескольких вещей.

Ответ 1

Вам не нужно использовать modernizr, но вы можете использовать их метод, чтобы определить, поддерживается ли localStorage

модернизация в github
тест для 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;
    }
});

обновлен с использованием текущего исходного кода

Ответ 2

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

Ответ 3

Также я не хочу использовать Modernizr, так как я использую только несколько HTML5 функции и загрузка большого script не стоит просто обнаружить поддержка этих немногих вещей.

Чтобы уменьшить размер файла Modernizr, настройте файл http://modernizr.com/download/ в соответствии с вашими потребностями. Локальная версия Modernizr для локального хранилища поставляется в 1,55 КБ.

Ответ 4

Эта функция работает нормально:

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

Источник: www.diveintohtml5.info

Ответ 5

Попробуйте window.localStorage!==undefined:

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

Вы также можете использовать typeof window.localStorage!=="undefined", но вышеприведенное утверждение делает это

Ответ 6

Я не видел этого в ответах, но я думаю, что хорошо знать, что вы можете легко использовать vanilla JS или jQuery для таких простых тестов, и, в то время как Modernizr помогает много, есть чистые решения без него.

Если вы используете 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 для проверки поддержки:

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

Итак, вся идея заключается в том, что всякий раз, когда вам нужны функции JavaScript, вы должны сначала протестировать родительский объект, а затем методы, которые использует ваш код.

Ответ 7

Попробуйте поймать работу:

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

Ответ 8

Попробуйте:

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

Ответ 9

if (window.localStorage){

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

}

Ответ 10

Изменение ответа Андреа для добавления геттера облегчает его использование. С ниже вы просто говорите: 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>