Cómo detectar si el navegador admite almacenamiento local HTML5

84

Las siguientes alertas de código ls existen 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 deba a que estoy usando IE9 en el navegador IE7 y en los modos de documento usando la herramienta de desarrollo IE9. O tal vez esta sea 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 no vale la pena cargar un script grande solo para detectar soporte para esas pocas cosas.

TK123
fuente
Posible duplicado de Check for HTML 5 localStorage
BuZZ-dEE

Respuestas:

99

No tiene que usar modernizr, pero puede usar su método para detectar si localStoragees compatible

modernizr en prueba de github
paralocalStorage

// 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

Andreas
fuente
3
Agregue var mod = "test";antes del bloque try-catch, de lo contrario, esto siempre fallará ya que mod no está definido allí.
Mahn
5
esto podría fallar si no queda espacio en el almacenamiento local.
Patrick
1
Honestamente, esta no es la mejor prueba porque ¿qué pasa si el almacenamiento local está lleno? localStorage puede ser compatible, pero solo en un estado donde no se puede agregar.
DemiImp
2
Tenga en cuenta que esto activará eventos de almacenamiento en otras ventanas
Mark Swardstrom
2
@Andreas - Sí, lo sé. Esta prueba modifica el almacenamiento local. Si no desea que eso suceda y solo desea probar el soporte, otras soluciones podrían ser una mejor opción.
Mark Swardstrom
44
if(typeof Storage !== "undefined")
  {
  // Yes! localStorage and sessionStorage support!
  // Some code.....
  }
else
  {
  // Sorry! No web storage support..
  }
Brandon Ferrara
fuente
7
typeof(Storage) !== void(0)es una mejor solución
Petja
2
@petjato debería serif (Storage !== void(0))
Andrew
4
typeofno es una función, es un operador de lenguaje. ¿Por qué el paréntesis?
r3wt
1
Esto parece ser una ligera variante de lo que se encuentra en el sitio web de W3Schools . Tampoco parece funcionar.
fujiiface
2
El modo de navegación privada en Safari no admite la escritura en localStorage, pero esta verificación devuelve verdadero para ese caso. La solución de Andreas maneja este caso.
Deepak Joy
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

juanra
fuente
1
Ha pasado mucho tiempo. y lo sé, es la mejor respuesta desde que leí el libro. Mi pregunta es ¿por qué estamos marcando una cosa dos veces para que sea NULL?
Ali Saberi
Creo que la primera 'localStorage' in windowverifica que la propiedad existe en el objeto de la ventana (no es 'indefinida'), y la segunda window['localStorage'] !== nullverifica que esa propiedad no sea NULL.
juanra
1
¿No podría lograrse simplemente haciendo una verificación de igualdad no estricta de la ventana ['localStorage'] == null? Eso cubre tanto el cheque indefinido como el nulo.
Triynko
Bueno supongo que sí. Si marca ´window ['something'] == null´, el resultado es "verdadero", incluso cuando no está definido. No obstante, elegiría el primer método en aras de la claridad.
juanra
15

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

Para reducir el tamaño del archivo de Modernizr, personalice el archivo en http://modernizr.com/download/ para que se ajuste a sus necesidades. Una versión localStorage de Modernizr tiene un costo de 1.55KB.

Steve A
fuente
3
Hola, bienvenido a Stack Overflow. Esto realmente suena más a que debería ser un comentario en lugar de una respuesta a la pregunta original. Me doy cuenta de que todavía no puedes comentar, pero alcanzar las 50 repeticiones no es difícil ni requiere mucho tiempo.
Jesse
1
puedes hacerlo, ¡solo quedan 9 repeticiones más! ok, voté a favor, así que ahora tienes 51
Simon_Weaver
Me doy cuenta de que 1.55kb no es nada, pero todavía parece una exageración solo para verificar el soporte de localStorage.
Tyler Biscoe
9

Prueba window.localStorage!==undefined:

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

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

Danilo Valente
fuente
2
Safari puede tener localStorage pero emitir un error si está en modo privado (QuotaExceededError) por lo que tr / catch es la mejor opción en mi humilde opinión
Endless
1
Hm, no lo sabía. Pero solo arroja ese error al intentar escribir cosas, ¿verdad?
Danilo Valente
1
En realidad, la mera comprobación del atributo window.localStorage (como se muestra en este ejemplo) arrojará un error cuando Safari esté configurado para bloquear cookies y datos de sitios web. Específicamente:SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.
Aaronius
El modo de navegación privada en Safari no admite la escritura en localStorage, pero esta verificación devuelve verdadero para ese caso. La solución de Andreas maneja este caso.
Deepak Joy
7

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

Si usa jQuery , puede hacer:

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

O, con JavaScript puro de vainilla :

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

Luego, simplemente haría un SI para probar el soporte:

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

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

Ovi Trif
fuente
3

Try catch hará el trabajo:

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

Tratar:

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

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

}
Darren
fuente
La mejor respuesta aquí a pasos agigantados
alex bennett
1

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

Sé que llego un poco tarde a la fiesta, pero tengo algunas funciones útiles que preparé y agregué a un archivo llamado "manage_storage.js". Espero que les sean tan útiles a ustedes como me han servido bien.

Recuerde: la función que está buscando (que responde a esta pregunta) es isLclStorageAllowed.

Entonces, sin más preámbulos, aquí está mi código:

/* 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.
fuente