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?
javascript
html
key
local-storage
Simone
fuente
fuente
Respuestas:
en ES2017 puedes usar:
fuente
Object.keys()
funciona como se esperaba tambiénEDITAR: 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í:
fuente
localStorage.length
y no usarlo directamente? 2) ¿Por qué declararlo dentro del bucle for? 3) ¿Por qué++i
se prefiere mási++
?++i
definitivamente no hace que el ciclo comience eni = 1
. La tercera expresión dentro del paréntesis se evalúa después de cada iteración.i++
y++i
ambos tienen exactamente el mismo efecto eni
. La diferencia es que++i
evalúa el nuevo valor dei
después de incrementar, mientras quei++
evalúa el valor dei
antes de incrementar. Aquí no hace absolutamente ninguna diferencia, porque lo único que nos importa es el efecto secundario del incrementoi
, no el valor de la expresión.Object.keys(localStorage)
funciona perfectamente bien para este escenario, siempre que no necesite admitir IE <9.localStorage.key( i )
parte.Me gusta crear un objeto fácilmente visible de esta manera.
También hago algo similar con las cookies.
fuente
fuente
Puede usar la
localStorage.key(index)
función para devolver la representación de cadena, dondeindex
está el enésimo objeto que desea recuperar.fuente
Si el navegador admite HTML5 LocalStorage, también debe implementar Array.prototype.map, lo que permite esto:
fuente
new Array(this.localStorage.length).fill(0)
que se siente un poco menos hacky que usar apply imo.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):
Esto registrará los datos en el formato "clave: valor"
(Kevin: ¡siéntete libre de incluir esta información en tu respuesta si quieres!)
fuente
Esto imprimirá todas las claves y valores en localStorage:
ES6:
fuente
Puede obtener claves y valores como este:
fuente
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:
fuente
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: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:
fuente
object.keys()
... Actualizaré mi respuesta para reflejar eso.[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 especificaOverrideBuiltins
. Puede ver una discusión al respecto en whatwg / html aquí: github.com/whatwg/html/issues/183También podemos leer por el nombre.
Digamos que hemos guardado el valor con el nombre 'usuario' como este
Entonces podemos leerlo usando
Lo usé y funciona sin problemas, no es necesario hacer el bucle for
fuente