Local Storage con React.js

🔵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):

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]);

• Cómo usar UseEffect()

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();

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

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.

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

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

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.

No confundir localStorage con sessionStorage.

https://binarycoffee.dev/post/cual-es-la-diferencia-entre-localstorage-sessionstorage-e-indexeddb

🔥 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

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

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 ‘toLowerCase’ 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
  ]

}

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