Índice del curso de ES6

  1. Introducción al Curso de Javascript
  2. console.log
  3. Comentarios
  4. Variables
  5. Operadores
  6. Estructuras condicionales
  7. Bucle for
  8. Bucle while
  9. Break! - Gran día de repaso
  10. funciones
  11. Arrow functions
  12. Métodos para trabajo con cadenas
  13. Números aleatorios
  14. location.href
  15. Colección de ejercicios
  16. DOM
  17. Efecto Parallax
  18. innerHTML
  19. Propiedad style
  20. Cambiar atributo src
  21. Añadir clase, borrar clase, alternar clase, evaluar si tiene una clase
  22. Create Element
  23. Arrays
  24. Ejercicios avanzados
  25. LocalStorage
  26. Deconstrucción
  27. fetch
  28. Import, export
  29. Modernizr

localStorage

localStorage vs Cookies:

  • En ambos casos la información es almacenada en el cliente, es decir, en el navegador, pero accedemos y manipulamos la información de las cookies desde el servidor y accedemos y manipulamos la información del localStorage desde el cliente.
  • Podemos almacenar hasta 4 Kb por cookie, mientras que en el caso de localStorage podemos almacenar hasta 4MB por dominio.

localStorage.setItem("clave", valor);
var variable = localStorage.getItem("clave");

Consideraciones:

localStore sólo almacena texto, si quisiera almacenar un array, tendría que seguir el siguiente proceso:

localStorage.setItem(JSON.stringify(names));
var storedNames = localStorage.getItem(JSON.parse(localStorage["names"]));

Ejercicio

Al pulsar el botón de "Salvar cambios" deben almacenarse los cambios. Al cerrar y regresar al navegador, los cambios deben estar ahí.

localstorage

Ejercicio

Crear un botón para eliminar el contenido almacenado en el ejercicio anterior.

localStorage.clear();
location.reload();
  • item 1
  • item 2
  • item 3
  • item 4
Ver ejercicio localstorage resuelto

Ejercicio

Al seleccionar una imagen, esta debe aparecer en la página siguiente.

storage image
icono de mandar un mailPreguntame lo que quieras!
Pablo Monteserín
contacta conmigoPablo Monteserín

El servicio de resolución de dudas técnicas es sólo para los usuarios premium. Si tienes cualquier otra duda, usa el formulario de contacto. ¡Gracias!