¿Cómo verificar si un elemento de almacenamiento está configurado?


288

¿Cómo puedo verificar si un artículo está configurado localStorage? Actualmente estoy usando

if (!(localStorage.getItem("infiniteScrollEnabled") == true || localStorage.getItem("infiniteScrollEnabled") == false)) {
    // init variable/set default variable for item
    localStorage.setItem("infiniteScrollEnabled", true);
}

2
parece que tendrá un problema sin un mutex de almacenamiento
4esn0k

Respuestas:


509

El getItemmétodo en la especificación de WebStorage, devuelve explícitamente nullsi el elemento no existe:

... Si la clave dada no existe en la lista asociada con el objeto, entonces este método debe devolver nulo. ...

Así que puedes:

if (localStorage.getItem("infiniteScrollEnabled") === null) {
  //...
}

Ver esta pregunta relacionada:


1
¿Podría agregar su propio método localStoragepara encapsular esta pequeña prueba? Por ejemplo localStorage.hasItem("infiniteScrollEnabled")?
Paul D. Waite

44
@Paul: Sí, incluso podría aumentar el Storage.prototypeobjeto, pero como regla general, siempre recomiendo no modificar objetos que no le pertenecen , especialmente objetos host.
CMS

ooh sí, buenos puntos allí. Viniendo de un fondo CSS, la idea de que puedo solucionar los problemas del navegador yo mismo es emocionante, pero puedo ver cómo la confusión con los objetos del navegador puede ser confusa.
Paul D. Waite

55
La nota es incorrecta: la versión actual de la Storageinterfaz dice específicamente que los valores son de tipo DOMString. w3.org/TR/webstorage/#the-storage-interface
Alnitak

1
Nota eliminada Gracias @TimothyZorn y Alnitak
CMS

45

Puede usar el hasOwnPropertymétodo para verificar esto

> localStorage.setItem('foo', 123)
undefined
> localStorage.hasOwnProperty('foo')
true
> localStorage.hasOwnProperty('bar')
false

Funciona en las versiones actuales de Chrome (Mac), Firefox (Mac) y Safari.


2
Debería ser la respuesta aceptada. El aceptado considerará un valor "nulo" almacenado como no establecido, lo cual es incorrecto.
Flavien Volken

9
@FlavienVolken Sin embargo, no puede tener un nullvalor almacenado . Puede tenerlo "null", pero el código allí no se comportará mal, mientras que este fallará en la lengthclave.
Kaiido

1
@Kaiido tienes razón, tuve este comportamiento porque estaba analizando directamente los datos almacenados y porque JSON.parse("null") === JSON.parse(null)tuve una colisión.
Flavien Volken

3
Obtuve el siguiente error de ESLint: "No acceda al método Object.prototype 'hasOwnProperty' desde el objeto objetivo.eslint (no-prototype-builtins)"
rfdc

Esto no funcionará si foo no está configurado en la carga de la página y desea hacer algo con foo. Creo que a eso se refería el interrogador, desea verificar si la clave fooexiste, no si foo tiene un valor. Tengo esta situación, donde un evento click se dispara .setitemcon una lógica basada en getItem, pero no funcionará hasta que establezca el elemento, y no puedo configurarlo hasta que sepa el estado de foo (valor1 o valor2). En otras palabras, verifique las salidas foo y luego configúrelo en el valor1 si no lo hace sin sobrescribir accidentalmente el valor2.
Rin y Len

22

La forma más corta es usar el valor predeterminado, si la clave no está almacenada:

var sValue = localStorage['my.token'] || ''; /* for strings */
var iValue = localStorage['my.token'] || 0; /* for integers */

4

También puede probar esto si desea verificar si no está definido:

if (localStorage.user === undefined) {
    localStorage.user = "username";
}

getItem es un método que devuelve nulo si no se encuentra el valor.


3
if(!localStorage.hash) localStorage.hash = "thinkdj";

O

var secret =  localStorage.hash || 42;

JavaScript devuelve el primer valor no nulo o positivo Ejemplos: [nulo || "abc"] devolverá "abc" [2 || 5] devolverá 2 [0 || 5] devolverá 5 [1 || 5] devolverá 1, etc. Por lo tanto, el código anterior funciona.
Deepak Thomas

2

De verdad

localStorage.infiniteScrollEnabled = 1;

Para falso

localStorage.removeItem("infiniteScrollEnabled")

VERIFICAR EXISTENCIA

if (localStorage[""infiniteScrollEnabled""]) {
  //CODE IF ENABLED
}

1

Debe verificar el tipo de elemento en el almacenamiento local

if(localStorage.token !== null) {
   // this will only work if the token is set in the localStorage
}

if(typeof localStorage.token !== 'undefined') {
  // do something with token
}

if(typeof localStorage.token === 'undefined') {
  // token doesn't exist in the localStorage, maybe set it?
}

1

¿Cómo se puede probar la existencia de un artículo en localStorage? Este método funciona en Internet Explorer.

<script>
    try{
        localStorage.getItem("username");
    }catch(e){
        alert("we are in catch "+e.print);
    }
</script>

2
Ciertamente no debería; getItem simplemente devuelve un valor nulo para las claves que no existen.
EricLaw

Estaba teniendo el mismo problema con IE, y esta es la solución, ++
edencorbin

Definitivamente deberías try | catchal analizar el artículo.
Abdul Sadik Yalcin

0
localStorage['root2']=null;

localStorage.getItem("root2") === null //false

¿Quizás sea mejor hacer un escaneo del plan?

localStorage['root1']=187;
187
'root1' in localStorage
true

0

La mejor y más segura forma en que puedo sugerir es esto,

if(Object.prototype.hasOwnProperty.call(localStorage, 'infiniteScrollEnabled')){
    // init variable/set default variable for item
    localStorage.setItem("infiniteScrollEnabled", true);
}

Esto pasa por la no-prototype-builtinsregla de ESLint .


0

Lo he usado en mi proyecto y funciona perfectamente para mí.

var returnObjName= JSON.parse(localStorage.getItem('ObjName'));
if(returnObjName && Object.keys(returnObjName).length > 0){
   //Exist data in local storage
}else{
  //Non Exist data block
}

0

la forma más fácil es

if(localStorage.test){
console.log("now defined");
}
else{
console.log("undefined");
localStorage.test="defined;"
}

Cómo funciona

cuando llama a localStorage.test por primera vez, no contiene ninguna tienda en el objeto localStorage, por lo que devuelve desencadenantes de condición no definidos. después de que se activara, configuré una nueva variable y nuevamente verifiqué que contiene datos para que devuelva datos con verdadero en condición


-2

Prueba este código

if (localStorage.getItem("infiniteScrollEnabled") === null) {

} else {

}

Hacer o no hacer. Aquí no hay intentos". Una buena respuesta siempre tendrá una explicación de lo que se hizo y por qué se hizo de esa manera, no solo para el OP sino para los futuros visitantes de SO.
Jay Blanchard
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.