Usando localstorage dinámicamente en React
Soy nuevo en React, así que ten paciencia.
Tengo algunos datos almacenados en el almacenamiento local antes de comenzar mi aplicación de React y quiero recorrer dinámicamente el almacenamiento local y mostrar los datos.
Actualmente lo tengo explícitamente configurado:
import React from 'react';
const App = () => {
return (
<div>
<h1>Hello World</h1>
<ul>
<li>locale: {localStorage.getItem('locale')}</li>
<li>pubKey: {localStorage.getItem('pubKey')}</li>
<li>version: {localStorage.getItem('version')}</li>
<li>dist: {localStorage.getItem('dist')}</li>
</ul>
</div>
);
}
export default App;
Pero quiero evitar definiciones explícitas y recorrer dinámicamente los datos del almacenamiento local.
Las soluciones elegantes y complejas siempre son bienvenidas también.
ACTUALIZACIÓN:
He intentado lo siguiente:
En html:
<script>
window.localStorage.setItem('app:data:persist',JSON.stringify({"version":"0.0.1","dist":"shard","locale":"en_US","pubKey":"6asd68d68ddd6saadd79asd7das79ads9"}));
</script>
<body>
En React:
const App = () => {
const localStorageData = JSON.parse(window.localStorage.getItem('app:data:persist'));
return (
<div>
<h1>Hello World</h1>
<ul>
{Object.entries(localStorageData).map(([key, value]) => {
return (
<li>{key} : {value}</li>
)
})}
</ul>
</div>
);
}
Pero no puedo obtener el valor para la entrada con la clave correctamente.
davy.ai
Para recorrer dinámicamente los datos almacenados en la memoria local y mostrarlos en tu aplicación de React, puedes seguir estos pasos:
window.localStorage.getItem()
.JSON.parse()
.Object.entries()
, que devuelve un array de pares [clave, valor].Aquí tienes un ejemplo de implementación:
Ten en cuenta que
Object.entries()
devuelve un array de pares [clave, valor], por lo que usamos la destructuración para separarlos en variables separadas en la firma de la función. También proporcionamos una propkey
al elemento<li>
para evitar una advertencia de React sobre claves faltantes en una lista.