Persistencia de datos con Local Storage

Necesitamos todos los cursos de React con este profe, es muy fácil entenderlo

API de almacenamiento web

localStorage: guarda la información en memoria incluso cuando el navegador se cierre y se reabra.

sesionStorage: uarda la informacion en memoria mientras dure la sesión de la página.

Storage.setItem()
cuando recibe un nombre y valor, lo almacena o actualiza si ya existe.

Ejemplo:

storage.setItem(nombre, valor);

Storage.getItem()
Devuelve el valor cuando le pasamos el nombre.

Ejemplo

let userBackground = storage.getItem(userBackground); 

// #000000

Storage.removeItem()
Elimina el valor almacenado cuando le pasamos el nombre:

Ejemplo

let userBackground = storage.removeItem(userBackground); 

// Queda el valor por defecto en caso que exista, por lo ejemplo un background blanco.

Storage.length
Devuelve un entero que indica el número de elementos guardados en el objeto ** Storage.**

Ejemplo

function userSettings() {
  localStorage.setItem('userBackground', '#000000');
  localStorage.setItem('font', comic sans');
  localStorage.setItem('fontSize', '18');

  localStorage.length;

 // 3
}

storage.clear();
borra todos los registros guardados en local.

Local storage VS Session Storage🥳
.
Me pareció muy curioso compartir estas dos interesantes herramientas que llamaron mi atención. 🤔
.
La principal diferencia entre estas dos, es que el Local Storage no tiene una fecha de expiración y está disponible en la web que estamos desarrollando de forma global. 💯 Lo interesante del Session Storage es que solo esta disponible ventana actual en la que estamos navegando y solo son accesibles para el dominio actual. 🔐

Hubo un momento en el que me confundí de donde salía tanta variable XD, pero analizándolo volví al camino. Es fácil perderse con tanto código

12.-Persistencia de datos con Local Storage

Nos permite tener persistencia de datos directamente en el front-end, sin necesidad del back-end.

Todos los navegadores web (o los mejorcitos) tienen esta herramienta, que nos permite guardar la info que nosotros queramos y mantenerla activa durante mucho tiempo.

• No importa si los usuarios cierran o recargan la ventana, cierran el navegador o apagan la computadora o vuelven dentro de cierto tiempo, local storage va a seguir guardando toda la info en el navegador.
• No solo se puede guardar, también se puede recibir.

Para hacer uso de esta herramienta vamos a crear un item, un nuevo elemento a guardar dentro de local storage.

NOTA: Solo se puede guardar texto, no objetos, números, ni otro tipo de datos.

localStorage.setItem('ejemploTodos', ejemplo);  //(lo que queremos guardar, lo que vamos a guardar)

//Para guardar los todos usaremos 
const ejemplo = JSON.stringify() //Nos permite transformar en texto un objeto o array de JS
JSON.parse(ejemplo) //Transforma en JS la variable con el array hecho string

localStorage.getItem('ejemploTodos'); //Nos lo va a mostrar
JSON.parse(localStorage.getItem('ejemploTodos'));

Su emoción cuando funciona el código me representa jajaja excelente profe!!

también se puede invocar o modificar las propiedades de localStorage como si se tratara de un objeto de JS, es decir, es que localStorage.getItem(‘TODOS_V1’) es equivalente a localStorage.TODOS_V1, de igual forma localStorage.setItem(‘TODOS_V1’, []) es equivalente a localStorage.TODOS_V1 = []

Para ver en tiempo real las acciones que realizas sobre el localStorage:
ve a la pestaña Application de tu dev tools en google chrome.

El ! no es que valide si algo esta vacío o no exista, es más bien así:

• Todos los valores en JS tiene un valor booleano (true o false) por ejemplo un string vacío, el 0, null, undefined equivalen a false, mientras que cualquier string, número diferente de cero, un arreglo u objeto (vacío o con contenido) equivalen a true

Para validar esto pueden usar la función Boolean(), entonces si queremos hacer algo si algo no existe:

// Si no existe la variable es igual a undefined por ende a false
if ( variable ) { 
	// Dado que dará false pues no entrará en esta sección del condicional
 }

Para esto usamos el ! que es para negar ( !true -> false | !false -> true ) entonces negamos la condición para que si no existe ( undefined por ende false ) se convierta en true y entre al primer bloque del if :

// Si no existe será undefined (false) pero al negar con el ! el resultado será true
if ( !variable ) { 
	// Ahora si entrará al condicional
 }

Extra: podemos usar la doble negación para ahorrarnos usar la función Boolean() así: !!variable (si negamos la negación pues quedará el valor original jaja en booleano)

Para agregar datos al local storage

Se borra cuando el usuario lo elimina manualmente o por borrar cache

localStorage.setItem('nombre','Juan');

Session Storage.

Se borra todo cuando cierras el navegador

sessionStorage.setItem('apellido','meap');

Eliminar localstorage

localStorage.removeItem('nombre');

Limpia completamente el local storage

localStorage.clear();

setItem añade el elemento

localStorage.setItem('nombre','Juan');

removeItem elimina el elemento

localStorage.removeItem('nombre','Juan');

getItem obtienes el elemento

const nombre = localStorage.getItem('nombre');

El local storage es muy útil si quieres “simular” una base de datos como desarrollador Frontend y no sabes mucho de Base de Datos. Al menos, para almacenar información temporalmente

Sin embargo, si borras la cache y las cookies, los datos del local storage se eliminaran

Esto es algo que aprendi cuando hacia una TodoApp mientras aprendía Javascript y el manejo de Local Storage

Abran la consola del navegador en esta misma clase, escriban localStorage y verán todos sus aportes y comentarios de su cuenta de Platzi :0

Para validar si hay o no hay TODOS en el localstorage igual podríamos usar este tipo de condición:

  const localStorageTodos = localStorage.getItem('todos');
  const defaultTodos = JSON.parse(localStorageTodos) || [];

definitivamente este profe explica muy bien, deberian de clonarlo y ponerlo a dar clases de todas las tecnologias

Si les aparece el siguiente error: > Uncaught Error: A cross-origin error was thrown. React doesn’t have access to the actual error object in development

Pueden resolverlo con los siguientes pasos:

1. Abran Dev tools en dsu navegador (Chrome).
2. Vayan a la sección “Application”
3. Limpien su local storage, que se encuentra en la sección “Storage” en la barra lateral izquierda.

Más info Aquí

Cookies vs Session Storage vs Local Storage

El Local Storage tiene un almacenamiento máximo de 5MB y la información no se va con cada request al servidor, la información va a persistir aunque cerremos el navegador.

El Session Storage es similar al Local Storage solo que la información está disponible por pestaña o por la ventana del navegador. La información estará disponible solo en esa pestaña.

Las** Cookies** tienen solo un almacenamiento de 4KB, se les puede establecer un tiempo de expiración, la desventaja de usarlo es que al hacer request de imágenes o datos las cookies van junto con la petición.

Si la información no es sensible podemos almacenarla en Local Storage o en Session Storage.

De nada gente ❤️

Para persistir datos en el navegador web:

• LocalStorage
• SessionStorage
• Cookies

Diferencias y caracteristicas de cada una? Aqui

Hola ahora soy adicto a ver el localStorage de todas las páginas web

Me encanta la emoción de Juan cuando funciona algo que tenía que funcionar jaja

Para la persistencia de datos, llegue a la siguiente implementacion, usando hooks, a mi parecer, mas limpia. Esta depende de estos 2 hooks:

• useRef: Similar a useState, pero no genera un re-render
• useEffect: Escucha alguno de los cambios en el ciclo de vida del componente (montaje, actualizacion, demontaje), ademas, se pueden especificar a que variables escuchara, en este caso, se ejecutara cada vez que haya un cambio en la variable todos, primero al montar el componente, y despues cada vez que se llame setTodos

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

const isInitialMount = React.useRef(true);

  React.useEffect(
    () => {
      if (isInitialMount.current) {
        let savedTodos = JSON.parse(localStorage.getItem('todos'));
	if (savedTodos){
          setTodos( savedTodos );
        }
        isInitialMount.current = false;
      } else {
        localStorage.setItem('todos', JSON.stringify(todos));
      }
    },
    [todos]
  );

Primero defini una variable que señala si es la primera vez que el estado se modifica, es decir, cuando se monta el componente, en caso de que se este montando, busca los datos en locaStorage, y si los encuentra, usa setTodos para setear el valor.

Luego, en cada actualizacion a la variable todos, la guarda en local storage

vengo de flutter y recien aprendo react y encuentro tantas cosas similares como el provider

excelente curso

Guau… que gran tema el de este sección y cuanto me sirve. Que mas decir del profesor, las ganas con las que enseña, como trasmite la información, genial, genial.

 if (!localStorageTodos) {
     localStorage.setItem('TODOS_V1', JSON.stringify(defaulTodos));
    parsedTodos = defaulTodos;
  } else {
    parsedTodos = JSON.parse(localStorageTodos);
  }

En la consola de del navegador en mi caso uso Firefox:

PASO 1: localStorage.getItem('TODOS_V1')

PASO 2: 
	const defaultTodos = [
	{text: 'Arreglar Reporte de Residencias', completed: false},
	{text: 'Preparar presentación en Diapositivas', completed: false},
	{text: 'Terminar la escuela de "Desarrollo con Python y Django"', completed: false},
	];

PASO 3: localStorage.setItem('TODOS_V1', JSON.stringify(defaultTodos))

PASO 4: localStorage.getItem('TODOS_V1')

FUNCIONÓ!!!

Documentación sobre el tema:

https://developer.mozilla.org/es/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

cuando grita, me hace pegar un salto en la siila

metodos en persistencia de datos

cambiando las carpetas

  const saveTodos = (newTodos) => {
    const stringifiedTodos = JSON.stringify(newTodos);
    localStorage.setItem('TODOS_V1', stringifiedTodos);
    updateTodo(newTodos);
  };

  const completeTodo = (text) => {
    const todoIndex = todos.findIndex(todo => todo.text === text);
    const newTodos = [...todos];
    newTodos[todoIndex].completed = true;
    saveTodos(newTodos);
  };

  const deleteTodo = (text) => {
    const todoIndex = todos.findIndex(todo => todo.text === text);
    const newTodos = [...todos];
    newTodos.splice(todoIndex, 1);
    saveTodos(newTodos);
  };

Mi solución quedó diferente, la dejo por si alguien quiere ver otra forma de persistir info.

const deleteTodo = ( text ) => {
    const newTodos = todos.filter( todo => todo.text !== text );
    localStorage.setItem( 'TODOS_V1', JSON.stringify( newTodos ) );
    setTodos(newTodos);
  };

En la función de update es exactamente lo mismo, es la misma línea arriba de la llamada a “setTodos”

import React from "react";
import { TodoCounter } from "./TodoCounter";
import { TodoSearch } from "./TodoSearch";
import { TodoList } from "./TodoList";
import { TodoItem } from "./TodoItem";
import { CreateTodoButton } from "./CreateTodoButton";
//import './App.css';

// const defaultTodos=[
//   {text: "Cortar cebolla", completed: true},
//   {text: "ir al curso de react", completed: false},
//   {text: "picar cebolla", completed: true},
//   {text: "lalalal", completed: false}
// ]

function App() {
  const localStorageTodo = localStorage.getItem('TODO_V1')
  let parsedTodos;

  if(!localStorageTodo){
    localStorage.setItem('TODO_V1',JSON.stringify([]))
    parsedTodos = []
  }else{
    parsedTodos = JSON.parse(localStorageTodo)
  }

  const [todos, updateTodo] = React.useState(parsedTodos)
  const [searchValue, setSearchValue] = React.useState('')

  const completedTodo = todos.filter(todo=>todo.completed).length
  const totalTodos = todos.length

  const saveTodos = (newTodos) => {
    const stringifiedTodos = JSON.stringify(newTodos);
    localStorage.setItem('TODOS_V1', stringifiedTodos);
    updateTodo(newTodos);
  };

  const completeTodo = (text) => {
    const todoIndex = todos.findIndex(todo => todo.text === text);
    const newTodos = [...todos];
    newTodos[todoIndex].completed = true;
    saveTodos(newTodos);
  };

  const deleteTodo = (text) => {
    const todoIndex = todos.findIndex(todo => todo.text === text);
    const newTodos = [...todos];
    newTodos.splice(todoIndex, 1);
    saveTodos(newTodos);
  };

  let searchedTodo = []

  if (!searchValue.length >=1){
    searchedTodo = todos
  }else{
    searchedTodo = todos.filter(todo=>{
      const todoText = todo.text.toLowerCase()
      const searchedText = searchValue.toLowerCase()
      return todoText.includes(searchedText)
    })
  }

  return (
  <React.Fragment>
      <TodoCounter
        completed={completedTodo}
        total = {totalTodos}
      />
      <TodoSearch
        searchValue={searchValue}
        setSearchValue={setSearchValue}
      />      
      <TodoList>
        {searchedTodo.map(todo =>(
          <TodoItem 
          key={todo.text} 
          text={todo.text}
          completed={todo.completed}
          completeTodo={completeTodo}
          deleteTodo={deleteTodo}
          />
        ))}
      </TodoList>
      <CreateTodoButton/>
  </React.Fragment>
  );
}

export default App;