Pregunta Cómo detectar si el navegador es compatible con almacenamiento local HTML5


Las siguientes alertas de código ls exist en IE7:

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

IE7 realmente no es compatible con el almacenamiento local, pero aún así lo alerta. Quizás esto se debe a que estoy usando IE9 en el navegador IE7 y en los modos de documento usando la herramienta de desarrollador IE9. O tal vez esta es la forma incorrecta de probar si LS es compatible. ¿Cuál es la manera correcta?

Además, no quiero usar Modernizr ya que estoy usando solo algunas características HTML5 y cargar un script grande no vale la pena solo para detectar soporte para esas pocas cosas.


75
2018-06-26 19:14


origen


Respuestas:


No tiene que usar modernizr, pero puede usar su método para detectar si localStorage esta apoyado

modernizr en github
hacer una prueba por 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;
    }
});

actualizado con el código fuente actual


87
2018-06-26 19:18



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

35
2018-06-26 19:15



Además, no quiero usar Modernizr ya que estoy usando solo algunos HTML5   características y cargar un script grande no vale la pena solo para detectar   apoyo para esas pocas cosas.

Para reducir el tamaño del archivo Modernizr, personalice el archivo en http://modernizr.com/download/ para adaptarse a tus necesidades Una versión de Modernizr de solo almacenamiento local viene a 1.55KB.


15
2018-04-01 14:16



Esta función funciona bien:

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

Fuente: www.diveintohtml5.info


13
2017-08-15 10:02



Tratar window.localStorage!==undefined:

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

También puedes usar typeof window.localStorage!=="undefined", pero la declaración anterior ya lo hace


8
2018-06-26 19:15



No lo vi en las respuestas, pero creo que es bueno saber que puedes usar fácilmente JS o jQuery de vanilla para pruebas tan simples, y aunque Modernizr te ayuda mucho, hay soluciones limpias sin él.

Si utiliza jQuery, tu puedes hacer:

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

O, con Vainilla pura JavaScript:

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

Entonces, simplemente haría un IF para probar el soporte:

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

Entonces, la idea es que siempre que necesite funciones de JavaScript, primero pruebe el objeto principal y luego los métodos que usa su código.


6
2017-07-26 20:52



Intentar atrapar hará el trabajo:

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

3
2017-08-10 09:02



Tratar:

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

1
2018-06-26 19:16



if (window.localStorage){

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

}

1
2017-08-13 08:44



Modificar la respuesta de Andrea para agregar un getter lo hace más fácil de usar. Con lo siguiente, simplemente diga: 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>


0
2017-12-30 03:04