Obtenga claves de almacenamiento local HTML5

145

Me pregunto cómo obtener todos los valores clave localStorage.


He intentado recuperar los valores con un simple bucle de JavaScript

for (var i=1; i <= localStorage.length; i++)  {
   alert(localStorage.getItem(i))
}

Pero solo funciona si las teclas son números progresivos, comenzando en 1.


¿Cómo obtengo todas las claves para mostrar todos los datos disponibles?

Simone
fuente
posible duplicado de stackoverflow.com/questions/3138564/…
kubetz
¿Por qué este ciclo comienza con i = 1 y termina con i = localStorage.length? En los navegadores que he probado (Chrome), el ciclo debe comenzar en 0 y finalizar en localStorage.length - 1 ...
Louis LC
@LouisLC porque estaba usando números progresivos para mis claves (como una clave primaria en una base de datos relacional).
Simone

Respuestas:

35

en ES2017 puedes usar:

Object.entries(localStorage)
nktshn
fuente
55
y supongo que Object.keys()funciona como se esperaba también
292
for (var key in localStorage){
   console.log(key)
}

EDITAR: esta respuesta está recibiendo muchos votos positivos, así que supongo que es una pregunta común. Siento que se lo debo a cualquiera que pueda tropezar con mi respuesta y pensar que es "correcto" simplemente porque fue aceptado para hacer una actualización. La verdad es que el ejemplo anterior no es realmente la forma correcta de hacer esto. La mejor y más segura forma es hacerlo así:

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  console.log( localStorage.getItem( localStorage.key( i ) ) );
}
Kevin Ennis
fuente
En este enlace ... stackoverflow.com/questions/15313606/… ... ¿por qué están utilizando todos estos métodos extraños para acceder a localStorage?
2
Varias preguntas para el código "mejor / más seguro": 1) ¿Por qué declararlo localStorage.lengthy no usarlo directamente? 2) ¿Por qué declararlo dentro del bucle for? 3) ¿Por qué ++ise prefiere más i++?
Luciano Bargmann
8
¿Realmente lo intentaste? ++idefinitivamente no hace que el ciclo comience en i = 1. La tercera expresión dentro del paréntesis se evalúa después de cada iteración. i++y ++iambos tienen exactamente el mismo efecto en i. La diferencia es que ++ievalúa el nuevo valor de idespués de incrementar, mientras que i++evalúa el valor de i antes de incrementar. Aquí no hace absolutamente ninguna diferencia, porque lo único que nos importa es el efecto secundario del incremento i, no el valor de la expresión.
Kevin Ennis
33
Vale la pena señalar que hoy en día Object.keys(localStorage)funciona perfectamente bien para este escenario, siempre que no necesite admitir IE <9.
Adrian
2
También es útil tener en cuenta que si desea mostrar el nombre de la clave en sí, puede hacerlo con la localStorage.key( i )parte.
Sean Colombo
30

Me gusta crear un objeto fácilmente visible de esta manera.

Object.keys(localStorage).reduce(function(obj, str) { 
    obj[str] = localStorage.getItem(str); 
    return obj
}, {});

También hago algo similar con las cookies.

document.cookie.split(';').reduce(function(obj, str){ 
    var s = str.split('='); 
    obj[s[0].trim()] = s[1];
    return obj;
}, {});
Zack Argyle
fuente
1
Me gusta ese estilo de iterar sobre objetos.
Jonathan Stellwag
12
function listAllItems(){  
    for (i=0; i<=localStorage.length-1; i++)  
    {  
        key = localStorage.key(i);  
        alert(localStorage.getItem(key));
    }  
}
nerdcoder
fuente
9

Puede usar la localStorage.key(index)función para devolver la representación de cadena, donde indexestá el enésimo objeto que desea recuperar.

Jeffrey Sweeney
fuente
7

Si el navegador admite HTML5 LocalStorage, también debe implementar Array.prototype.map, lo que permite esto:

Array.apply(0, new Array(localStorage.length)).map(function (o, i) {
    return localStorage.key(i);
})
cillay
fuente
También puede hacer lo new Array(this.localStorage.length).fill(0)que se siente un poco menos hacky que usar apply imo.
Lenny,
6

Como la pregunta mencionaba la búsqueda de las claves, pensé que mencionaría que para mostrar cada par de claves y valores, podría hacerlo así (según la respuesta de Kevin):

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  console.log( localStorage.key( i ) + ": " + localStorage.getItem( localStorage.key( i ) ) );
}

Esto registrará los datos en el formato "clave: valor"

(Kevin: ¡siéntete libre de incluir esta información en tu respuesta si quieres!)

Sean Colombo
fuente
1

Esto imprimirá todas las claves y valores en localStorage:

ES6:

for (let i=0; i< localStorage.length; i++) {
    let key = localStorage.key(i);
    let value = localStorage[key];
    console.log(`localStorage ${key}:  ${value}`);
}
Rahim Naik
fuente
1

Puede obtener claves y valores como este:

for (let [key, value] of Object.entries(localStorage)) {
  console.log(`${key}: ${value}`);
}
Admir
fuente
0

Estoy de acuerdo con que Kevin tiene la mejor respuesta, pero a veces, cuando tiene diferentes claves en su almacenamiento local con los mismos valores, por ejemplo, desea que sus usuarios públicos vean cuántas veces han agregado sus artículos en sus cestas, debe mostrarles el varias veces, entonces puedes usar esto:

var set = localStorage.setItem('key', 'value');
var element = document.getElementById('tagId');

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  element.innerHTML =  localStorage.getItem(localStorage.key(i)) + localStorage.key(i).length;
}
Hassan Azimi
fuente
-1

Para aquellos que mencionan el uso Object.keys(localStorage)... no lo hagan porque no funcionará en Firefox (irónicamente porque Firefox es fiel a las especificaciones). Considera esto:

localStorage.setItem("key", "value1")
localStorage.setItem("key2", "value2")
localStorage.setItem("getItem", "value3")
localStorage.setItem("setItem", "value4")

Debido a que key, getItem y setItem son métodos prototípicos Object.keys(localStorage), solo regresarán ["key2"].

Lo mejor es hacer algo como esto:

let t = [];
for (let i = 0; i < localStorage.length; i++) {
  t.push(localStorage.key(i));
}
Mike Ratcliffe
fuente
@Darkrum Debido a que Firefox sigue la especificación correctamente, fallarían key, getItem y setItem si usa object.keys()... Actualizaré mi respuesta para reflejar eso.
Mike Ratcliffe
Solo lea las especificaciones para el almacenamiento local y no veo lo que mencionó.
Darkrum
Y leer la especificación para object.keys () parece que Firefox es lo que no está en barbecho si lo que dices es cierto.
Darkrum
@Darkrum Mira html.spec.whatwg.org/multipage/… y puedes ver que la especificación define el IDL con [Exposed=Window]. Esto da como resultado el comportamiento que describo. Si se especificara con [Exposed=Window,OverrideBuiltins]él, daría el comportamiento que esperamos pero la especificación no especifica OverrideBuiltins. Puede ver una discusión al respecto en whatwg / html aquí: github.com/whatwg/html/issues/183
Mike Ratcliffe
Nuevamente, como diré, esto no tiene nada que ver con cómo funciona object.keys. La elección de Mozillas de no permitir que se establezcan es cómo interpretaron la especificación. Claramente, Google sabía lo que estaba haciendo porque lo que hace un prototipo que no se puede cambiar a menos que se haga específicamente por otros medios tiene algo que ver con sus propias propiedades.
Darkrum
-3

También podemos leer por el nombre.

Digamos que hemos guardado el valor con el nombre 'usuario' como este

localStorage.setItem('user', user_Detail);

Entonces podemos leerlo usando

localStorage.getItem('user');

Lo usé y funciona sin problemas, no es necesario hacer el bucle for

Ali Adravi
fuente