A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Persistencia de datos con Local Storage

13/23
Recursos

Aportes 31

Preguntas 15

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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(鈥楾ODOS_V1鈥) es equivalente a localStorage.TODOS_V1, de igual forma localStorage.setItem(鈥楾ODOS_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 鈥渟imular鈥 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鈥檛 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 鈥淎pplication鈥
  3. Limpien su local storage, que se encuentra en la secci贸n 鈥淪torage鈥 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脫!!!

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 鈥渟etTodos鈥

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;