Ejercicio de programación con HTML: Reto LocalStorage en HTML

Código
Práctica
0h 5m

Practica HTML y JavaScript guardando el color favorito del usuario en LocalStorage y aplicándolo al cargar la página.

Crea una página HTML que permita al usuario seleccionar su color favorito mediante un selector y lo guarde en LocalStorage. La página debe recordar la elección del usuario incluso después de cerrar y volver a abrir el navegador.

Para resolver este ejercicio:

  1. Crea un selector (elemento ) con al menos 3 opciones de colores diferentes
    • Implementa una función JavaScript que guarde la selección del usuario en LocalStorage cuando cambie el valor del selector
    • Al cargar la página, verifica si existe una preferencia guardada en LocalStorage y, en caso afirmativo, establece el selector en ese valor
    • Añade un botón para borrar la preferencia guardada (usando removeItem)
    • Aplica el color seleccionado como color de fondo de la página para mostrar visualmente la preferencia

Asegúrate de manejar correctamente los casos donde LocalStorage no esté disponible.

Empezar ejercicio de programación

Todos los ejercicios de programación de HTML

Evalúa tus conocimientos con ejercicios de programación en HTML de tipo Test, Puzzle, Código y Proyecto con VSCode.

Tutorial para resolver este ejercicio de programación

HTML5

HTML

Local Storage y Session Storage

APIs de HTML5

Otros tutoriales de programación con HTML

Introducción A Html

HTML5

Introducción Y Entorno

Entorno Para Desarrollar Html

HTML5

Introducción Y Entorno

Introducción A La Web Y Cómo Funciona

HTML5

Introducción Y Entorno

Doctype

HTML5

Sintaxis Y Estructura

Elementos Y Etiquetas

HTML5

Sintaxis Y Estructura

Atributos

HTML5

Sintaxis Y Estructura

Anidación De Etiquetas

HTML5

Sintaxis Y Estructura

Comentarios

HTML5

Sintaxis Y Estructura

Encabezados (H1-h6)

HTML5

Textos Y Enlaces

Enlace (A)

HTML5

Textos Y Enlaces

Párrafo (P)

HTML5

Textos Y Enlaces

Listas (Ul, Ol, Li)

HTML5

Textos Y Enlaces

Imagen (Img)

HTML5

Textos Y Enlaces

División (Div)

HTML5

Organización De Contenido

Etiquetas Semánticas (Article, Section, Header, Footer, Nav, Aside)

HTML5

Organización De Contenido

Tablas (Table, Tr, Td, Th)

HTML5

Organización De Contenido

Formularios (Form, Input, Select, Textarea, Button)

HTML5

Organización De Contenido

Imágenes Vectoriales (Svg)

HTML5

Elementos Multimedia

Incrustación De Contenido (Iframe)

HTML5

Elementos Multimedia

Audio (Audio)

HTML5

Elementos Multimedia

Video (Video)

HTML5

Elementos Multimedia

Imágenes Responsive Con Srcset Y Sizes

HTML5

Elementos Multimedia

Svg Y Canvas En Html

HTML5

Elementos Multimedia

Iconos Con Font Awesome

HTML5

Elementos Multimedia

Estilo Incorporado (Style)

HTML5

Metadatos Y Seo

Metadatos (Meta, Title, Link)

HTML5

Metadatos Y Seo

Atributos De Aria

HTML5

Metadatos Y Seo

Navegación Por Teclado

HTML5

Metadatos Y Seo

Tipos De Input Tradicionales Y Nuevos

HTML5

Formularios Html

Introducción Al Seo

HTML5

Metadatos Y Seo

Validaciones En Formularios

HTML5

Formularios Html

Metadatos Opengraph

HTML5

Metadatos Y Seo

Principios Wcag

HTML5

Accesibilidad Web

Drag And Drop

HTML5

Apis De Html5

Geolocalización Con Html

HTML5

Apis De Html5

Contraste Y Legibilidad

HTML5

Optimización Html

Validación De Html

HTML5

Optimización Html

Compatibilidad Con Navegadores

HTML5

Optimización Html

Optimización De La Carga De La Página (Lazy Loading)

HTML5

Optimización Html

Estilos Inline

HTML5

Estilos Css En Html

Tailwind Css Para Html

HTML5

Estilos Css En Html

Hojas De Estilos Css En Html

HTML5

Estilos Css En Html