No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de React.js

Curso de React.js

Juan David Castro Gallego

Juan David Castro Gallego

Local Storage con React.js

13/34
Recursos

Aportes 41

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

馃數Evita acceder al localStorage dentro del componente

Acceder a los valores del localStorage dentro del componente es muy pesado en cuanto al rendimiento, ya que se ejecuta sincr贸nicamente en cada re-renderizado del componente. En su lugar, puedes leerlo utilizando un callback que retorne el valor inicial del useState, esto permitir谩 acceder a la informaci贸n una sola vez al momento que se crea el componente, esto por la definici贸n de useState.
.

const [todos, setTodos] = useState(() => {
  const todosFromStorage = window.localStorage.getItem('TODOS_V1')
  if (todosFromStorage) return JSON.parse(todosFromStorage)
  return []
})

LocalStorage es una forma de almacenar datos en el navegador web, que persisten a煤n despu茅s de que el usuario haya cerrado la ventana o salido del sitio web. Es 煤til para guardar informaci贸n del usuario, como preferencias, configuraciones, entre otros.
.
Los m茅todos m谩s comunes de LocalStorage son:
.
localStorage.setItem(key, value): Agrega un elemento con una clave y un valor al almacenamiento local.
localStorage.getItem(key): Recupera el valor de la clave especificada en el almacenamiento local.
localStorage.removeItem(key): Remueve un elemento del almacenamiento local seg煤n su clave.
localStorage.clear(): Borra todos los elementos del almacenamiento local.

Chicos para comentar las lineas de codigos recuerden que el atajo es control + k + c, para descomentar es control + k + u

Renderizado inicial desde Local Storage (version abreviada):

Local Storage con React.js

馃挕 Local Storage es un metodo para tener datos persistentes del lado del navegador. Se pueden almacenar inicios de sesion y/o estados y aunque se recarge, cierre o reinicie permaneceran disponibles para su uso.
.
Local Storage solo puede guardan datos en formato string. Se guardan en formato de Clave : Valor.
.

Como guardar y acceder a datos en Local Storage

  1. Todo dato a guardar en Local Storage debe ser convertido a string, se puede hacer con la funcion JSON.stringyfi( datos ).

    //* transformar datos a string
    let stringifiedTodos = JSON.stringify(localStorageTodos)
    
  2. Guardar datos en Local Storage mediante la funcion localStorage.setItem( ).
    Esta funcion recibe dos parametros: 1. El nombre identificador de los datos y 2. los datos como string.
    Si la clave ya existe se reemplazara su valor.

    //* Guardar datos en Local Storage con setItem()
    localStorage.setItem('TODOS_V1', stringifiedTodos)
    
  3. Acceder a datos guardados en Local Storage con el metodo getItem()
    getItem recibe un parametro que es el nombre identificador de los datos que se requieren.

    //* Obteniendo datos de Local Storage con getItem()
    const localStorageTodos = localStorage.getItem('TODOS_V1')
    
  4. Convertir datos de Local Storage a datos de JavaScript: Los datos vienen en formato string y se pueden transformar para ser manipulados en JavaScript mediante la funcion JSON.parse()

    let parsedTodos = JSON.parse(localStorageTodos);
    
  5. Remover datos de Local Storage: con el metodo localStorage.removeItem( nombreItem ) se puede eliminar un valor guardado.
    localStorage.removeItem( 'nombreItem' )

  6. Limpiar Local Storage: se pueden eliminar todos los datos guardados con el metodo localStorage.clear();

Yo use useEffect() para manejar el localStorage.
El primer useEffect() trae los datos de localStorage a nuestra app, y el segundo actualiza el LocaStorage cada vez que cambia el estado de tasks.

  useEffect(() => {
    if (localStorage.getItem("TODOS_V1")) {
      if (JSON.parse(localStorage.getItem("TODOS_V1")).length > 0) {
        setTasks(JSON.parse(localStorage.getItem("TODOS_V1")));
      }
    }
  }, []);
  useEffect(() => {
    const savedData = [...tasks];
    localStorage.setItem("TODOS_V1", JSON.stringify(savedData));
  }, [tasks]);

Local Storage herramienta que nos ayuda hacer persistencia de datos en el navegador.

Le铆 en un comentario que no se debe trabajar tanto con el storage dentro del componente por tema de optimizaci贸n, as铆 que lo hice un poquito diferente para evitar los condicionales en medio del componente y acceder al localStorage ah铆.
驴Alguien sabe si es correcto y 贸ptimo hacerlo as铆?

Nota: la herramienta es CodeSnap en VS Code.

馃敟 Atajos de VSC

Si quieren saber los atajos de VSC y quieren elegir los m谩s 煤tiles, pueden leer estos 鉁 apuntes sobre atajos de VSC. La verdad es que sirven mucho.

Alguien me puede ense帽ar como el profe Juan borra palabras tan rapido? jaja estoy en Mac

Si el elemento de localStorage se encuentra en el estado inicial, o si est谩 vac铆o, recomiendo:

const [todos, setTodos] = React.useState(parsedTodos || []);

LocalStorage en React:

LocalStorage es una caracter铆stica del navegador que permite a las aplicaciones web almacenar datos de forma persistente en el navegador. Estos datos se conservan incluso cuando se cierra la pesta帽a del navegador o se reinicia la computadora. En React, LocalStorage se utiliza com煤nmente para almacenar y recuperar informaci贸n importante del usuario, como configuraciones, preferencias o datos temporales.

Principales Conceptos:

  1. Almacenamiento de Datos:

    • LocalStorage permite almacenar pares clave-valor en el navegador. Los datos se almacenan como cadenas de texto.
  2. Persistencia de Datos:

    • Los datos almacenados en LocalStorage persisten a trav茅s de las recargas de p谩gina y las sesiones del navegador. Esto significa que los datos estar谩n disponibles incluso despu茅s de cerrar y volver a abrir la aplicaci贸n.
  3. Capacidad de Almacenamiento:

    • La capacidad de almacenamiento de LocalStorage es generalmente mayor que la de las cookies, pero a煤n as铆 tiene l铆mites. Se puede almacenar alrededor de 5 MB de datos por dominio.

Uso de LocalStorage en React:

En React, puedes interactuar con LocalStorage para almacenar y recuperar datos utilizando las siguientes funciones principales:

  1. localStorage.setItem(key, value)

    • Esta funci贸n se utiliza para almacenar un par clave-valor en LocalStorage. key es la clave con la que se identificar谩 el valor y value es el dato que se almacenar谩.
    localStorage.setItem('username', 'john_doe');
    
  2. localStorage.getItem(key)

    • Esta funci贸n se utiliza para recuperar el valor asociado con una clave espec铆fica desde LocalStorage.
    const username = localStorage.getItem('username');
    
  3. localStorage.removeItem(key)

    • Esta funci贸n elimina el par clave-valor asociado con la clave especificada de LocalStorage.
    localStorage.removeItem('username');
    

Uso Com煤n en React:

En una aplicaci贸n React, LocalStorage se utiliza com煤nmente para:

  • Guardar Preferencias del Usuario:

    • Guardar configuraciones personalizadas, temas o preferencias del usuario para que se mantengan entre sesiones.
  • Persistir Datos Temporales:

    • Mantener datos temporales, como formularios no completados, incluso si la p谩gina se recarga.
  • Manejar Sesiones de Usuario:

    • Almacenar informaci贸n sobre la sesi贸n del usuario para mantenerlo autenticado incluso despu茅s de cerrar y volver a abrir la aplicaci贸n.

Ejemplo en React:

// Almacenar en LocalStorage
localStorage.setItem('theme', 'dark');

// Recuperar de LocalStorage
const theme = localStorage.getItem('theme');

// Eliminar de LocalStorage
localStorage.removeItem('theme');

Recuerda que los datos almacenados en LocalStorage son accesibles a trav茅s de JavaScript en el navegador, por lo que no se deben almacenar datos sensibles o cr铆ticos de seguridad en LocalStorage.

cuando el profesor iba a ver si el condicional funcion贸 en el minuto 19:56 a mi me aparec铆a enste nuevo error: **VM659:1 Uncaught SyntaxError: Unexpected token 'o', "\[object Obj"... is not valid JSON at JSON.parse (\<anonymous>)** que significaba que cuando quer铆a parsear el localStorageTodos en caso de que hubiera infomaci贸n, no era v谩lido, y yo no entend铆a qu茅 estaba sucediendo si hab铆a escrito todo bien. estuve unos buenos minutos tan frustrada que llor茅 (tengo mucho estr茅s acumulado) y al final me toc贸 acudir con mi hermano mayor. todo el problema era que ten铆a informaci贸n guardada en el localStorage y eso obstru铆a todo el flujo de c贸digo nuevo que hab铆a escrito, justo como el profesor hab铆a advertido. hab铆a olvidado que no borr茅 la informaci贸n que hab铆a guardado de las pruebas. les recomiendo mucho que, en caso de que se sientan muy estresados con un error, se levanten de la silla y se despejen un rato. a m铆 la frustraci贸n me ceg贸 de tal forma que no pude recapitular todo lo que hab铆a hecho y encontrar el error a base de ello. espero que mi experiencia le sea de ayuda a alguna persona que tal vez est茅 pasando por lo mismo o algo parecido.

Para el manejo del error de que no exista data inicial, acort茅 un poco el c贸digo:

  let parsedTodos = JSON.parse(localStorage.getItem('TODOS_V1'));
  if (!parsedTodos) {
    localStorage.setItem('TODOS_V1', JSON.stringify([]))
    parsedTodos = []
  }

otra clase muy satisfactoria鈥 馃槂

A mi me funciona si el operador ternario lo colocamos directo en el estado inicial de todos quedano de la asiguiente forma:

const [todos, setTodos] = React.useState(
    parsedToDos ? JSON.parse(parsedToDos) : []
  );

Para hacer el paso de manejo de localStorage no es 100% necesario usar el condicional if, si quieren usar un codigo mas corto simplemente pueden apoyarse en los valores por defecto o default values

const localStorageTodos = localStorage.getItem('Todos_V1')

let parsedTodos = JSON.parse(localStorageTodos) || localStorage.SetItem('Todos_V1', JSON.stringify([]))

De esta manera tenemos el mismo resultado pero mas legible para mi gusto.

Compiled with problems:X

ERROR in ../../../../../../../node_modules/nodemon/lib/utils/index.js 2:11-26

Module not found: Error: Can't resolve 'path' in '/home/ervin/node_modules/nodemon/lib/utils'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }

si les pasa este error es por que vscode automaticamente importo.

import { stringify } from "nodemon/lib/utils";

solo tiene que borrar esta importaci貌n que esta en app.js

no es mucho pero ami me gusta ![](https://static.platzi.com/media/user_upload/image-a05dfc6f-fe33-4a9d-a9e0-89892e0c1376.jpg)
me ha matado, estoy totalmente en OffSide. Hice paso por paso y se me rompi贸 toda la p谩gina. A tal punto que dije "ok, voy a recursos y copio y pego y analiz贸 en donde estoy mal" y nada O.o. Hice correr directamente el c贸digo de recursos y tampoco O.o. A alguien le ha funcionado? infelizmente tuve que buscar info por internet porque me rend铆 y tuve que reemplazar ese if-else por try \&catch. Habra que ver en donde mas se me va a romper a futuro O.o

con todo respeto a el proje juan, y a todos los desarrolladores de scripting, que cuando la gente cree que lo unico en el mundo que existe es javascript no saben crear codigo scalable y mantenible. Este codigo en la vida real seria muy dificil de mantener por que tiene un nivel brutal de acoplamiento. Eso hace que sea muy dificil de debuggear y modificar. y no hablo que se necisite dividir en carpetas eso no es importante. Es que las funciones deberian ser abstractas y no cambiar su funionamiento dentro si no por parametros pero este codigo no es para nada ingenieria de software parece mas hecho de afan.

adjunto mi peque帽o aporte para mejorar un poco la lectura del codigo

//local storage
    const local_Todos = () => {
        let localStorageTodos = JSON.parse(localStorage.getItem("TODOS"));
        if (!localStorageTodos) {
            localStorage.setItem("TODOS", JSON.stringify([]));
            return (localStorageTodos = []);
        } else {
            return localStorageTodos;
        }
    };
    const [searchValue, setSearchValue] = React.useState("");
    const [todos, setTodos] = React.useState(local_Todos()); 

Local Storage herramienta que nos ayuda hacer persistencia de datos en el navegador.

Me encanto esta clase, localStorage es una API del navegador muy poderosa que debemos aprender.

us茅 saveTask jajaja

Que curiosidad, compar茅 la l铆nea de c贸digo 43 con la del profe y me di cuenta que 茅l no ten铆a el m茅todo 鈥榯oLowerCase鈥 en esa l铆nea, quit茅 ese m茅todo y al completar alg煤n Todo, y refrescar la p谩gina; no sal铆a el Todo completado

return todoText.toLowerCase().includes(searchText)

Para aquellos que se aventuraron a hacer este curso en TS, bueno les dejo mi codigo para que puedan guiarse y comentar algun plus

const useLocalStorege = <T,>(itemName:string, initialValue:T): [T, (newTodos: T) => void] => {
  
  const localStorageTodos = localStorage.getItem(itemName);
  
  let parsedTodos:T;
  
  if(!localStorageTodos){
    localStorage.setItem(itemName, JSON.stringify(initialValue))
    parsedTodos = initialValue
  } else {
    parsedTodos = JSON.parse(localStorageTodos) as T;
  }

  const [item, setItem] = useState<T>(parsedTodos);

  const saveTodos = (newTodos:T) => {
    setItem(newTodos);
    localStorage.setItem(itemName, JSON.stringify(newTodos))
  }

  return [
    item,
    saveTodos
  ]

}

**LOCAL STORAGE** *El **Local** **Storage** en* **React.js** *es una **caracter铆stica** del **navegador** que permite **almacenar** **datos** en **formato** **clave-valor** **directamente** en el **cliente**, de **forma** **persistente**, es decir, **incluso** **despu茅s** de **cerrar** la **pesta帽a** o el **navegador**. En el **contexto** de **aplicaciones*** **React***, se **utiliza com煤nmente** para **guardar** el **estado** de la **aplicaci贸n**, **configuraciones** del **usuario** o **cualquier** **informaci贸n** que deba **persistir entre sesiones**. La* **API** *de **Local Storage** es **accesible** **a trav茅**s del **objeto*** **window.localStorage***, y permite **interactuar** con los **datos** mediante **m茅todos** como* **setItem***,* **getItem***, **removeItem** y* **clear***. Su **uso** puede **mejorar** la **experiencia** del **usuario** al **mantener** la **consistencia** de los **datos** y **reducir** la **necesidad** de **realizar** **solicitudes** al **servidor** para **recuperar** la **misma** **informaci贸n**.*
cada vez que agrego algo nuevo en el c贸digo se me desaparece otra parte del c贸digo mi c贸digo para cubo rubik :(
una solucion para eliminar el local storage de golpe es * LocalStorage.clear()
TIP INMENSO para solucionar la complejidad del local storage. class Storage { constructor( ){ this.key = "todos\_v1"; this.value = ""; } setInitialData(todos) { localStorage.removeItem(this.key); this.saveData(todos) } stringify(array) { return JSON.stringify(array) } parser(array) { return JSON.parse(array) } saveData(todos) { localStorage.removeItem(this.key); let stringifiedTodos = this.stringify(todos) localStorage.setItem(this.key, stringifiedTodos) console.log(localStorage.getItem(this.key)) } getData() { let data = localStorage.getItem(this.key) let parsedTodos = this.parser(data) console.log(parsedTodos) return parsedTodos; } } const useLocalStorage = new Storage(); function App() { const \[ todos, setTodos ] = React.useState(useLocalStorage.getData() || \[{ name: 'cyberpunk 2077', completed: false }]) ```js class Storage { constructor( ){ this.key = "todos_v1"; this.value = ""; } setInitialData(todos) { localStorage.removeItem(this.key); this.saveData(todos) } stringify(array) { return JSON.stringify(array) } parser(array) { return JSON.parse(array) } saveData(todos) { localStorage.removeItem(this.key); let stringifiedTodos = this.stringify(todos) localStorage.setItem(this.key, stringifiedTodos) console.log(localStorage.getItem(this.key)) } getData() { let data = localStorage.getItem(this.key) let parsedTodos = this.parser(data) console.log(parsedTodos) return parsedTodos; } } const useLocalStorage = new Storage(); function App() { const [ todos, setTodos ] = React.useState(useLocalStorage.getData() || [{ name: 'cyberpunk 2077', completed: false }]) ```
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-02-01%20183845-7adac515-3e79-488e-afb6-0108b9682803.jpg)![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-02-01%20183857-7212170e-0668-4ce0-855c-0fe14639b964.jpg) Separemos el c贸digo en dos partes: El c贸digo comentado en la parte superior y el componente principal App. Es el componente principal porque donde termina la foto, es decir, a partir de la l铆nea de c贸digo 66 empieza el return() donde se a帽aden los dem谩s componentes "hijos" de App. 1\. El array comentado es opcional dejarlo en nuestra consola del navegador, para as铆 tener algunos TODOs iniciales de referencia. 2\. La l铆nea 20 del c贸digo, comentada tambi茅n, solo es necesaria dejarla en la consola del navegador si la dejamos seguida del array inicial. Esta se leer铆a: Gu谩rdame en localStorage un nuevo objeto "TODOS\_V1" una copia del array inicial convertido en string. Esto es porque como recordamos, solo debemos guardar strings en localStorage. 3\. Entre la l铆nea 25 y 29 tenemos una arrow function llamada saveTodos a la que pasamos el par谩metro newArray. Esta se va a encargar de establecer en local storage un string con el par谩metro newArray bajo el nombre "TODOS\_V1" y llamar a la funci贸n actualizadora del estado tambi茅n con el par谩metro newArray. Esto ocurrir谩 solamente cuando esta funci贸n sea llamada y, como lleva dentro a la funci贸n actualizadora del estado queda directamente vinculada con las l铆neas 57 y 64. Esto significa que en ellas ya no llamamos a la funci贸n actualizadora setTodos si no a esta nueva funci贸n y as铆 almacenar los cambios de completar o eliminar un TODO en localStorage. 4\. En la l铆nea 31 tenemos una constante llamada parsedTodos que se leer铆a: Convi茅rteme de nuevo a un objeto legible con JSON.parse el string que te pido que me muestres con getItem y que est谩 almacenado en localStorage llamado "TODOS\_V1". 5\. Por 煤ltimo, en la l铆nea 34, en nuestro estado 'todos' hacemos una modificaci贸n y le pedimos que, en vez de empezar con arrayTodos como primera fase del estado que lo haga con parsedTodos, y si este no existe, con un array vac铆o. Todo esto encapsulado en una arrow function. Si no entregamos un array vac铆o y en este caso parsedTodos no existiese, React se romper铆a.
Hola, tengo un error... Uncaught SyntaxError: Unexpected token 'o', "\[object JSON]" is not valid JSON Estoy buscando en google c贸mo solucionarlo
![]()necesito ayuda :( dice que tengo un problema con la propiedad filter ![](https://static.platzi.com/media/user_upload/FSDFE-fe708840-f6da-4c14-90e6-939ff0b96b6c.jpg)

Osea el localStorage es lo mismo que cuando apago mi PC y luego vuelvo al curso, esta justo donde lo deje.

Tu lo guardas demasiado rapido en localStorage y me pierdo

no me da me vota error

Local Storage herramienta que nos ayuda hacer persistencia de datos en el navegador.

Me gust贸 mucho la forma en la que se aplic贸 el tema de persistencia de datos, gracias profe Juan, se valora su trabajo!
El art铆culo de esta p谩gina resume de forma bastante clara los conceptos vistos de Persistencia de datos en el navegador con js: Web Storage API, atributos y m茅todos. https://somospnt.com/blog/206-persistencia-de-datos-en-el-navegador-con-js-web-storage-api