💾 Nivel 16 - LocalStorage

📖 LocalStorage - Tu disco duro del navegador

💾 ¿Qué es LocalStorage?

LocalStorage es como una memoria especial del navegador donde puedes guardar información. ¡Lo mejor es que la información se queda guardada incluso si cierras el navegador!

💡 Piensa en LocalStorage como...

¡Un pequeño armario en tu navegador donde puedes guardar notas, puntuaciones, preferencias y más!

🛠️ Métodos principales:

localStorage.setItem("clave", "valor")

Guarda un dato

localStorage.getItem("clave")

Lee un dato

localStorage.removeItem("clave")

Borra un dato

localStorage.clear()

Borra TODO

📝 Ejemplo práctico:

// Guardar
localStorage.setItem("nombre", "Ana");
localStorage.setItem("edad", "9");

// Leer
let nombre = localStorage.getItem("nombre");
console.log(nombre); // "Ana"

// Borrar uno
localStorage.removeItem("edad");

// Borrar todo
localStorage.clear();

⚠️ Importante:

LocalStorage solo guarda texto (strings). Si quieres guardar números u objetos, usa JSON.stringify() para guardar y JSON.parse() para leer.

💻 Editor de LocalStorage

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>LocalStorage Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #ecfeff, #cffafe);
            min-height: 100vh;
            padding: 20px;
        }
        
        h1 { text-align: center; color: #0891b2; }
        
        .contenedor {
            max-width: 600px;
            margin: 0 auto;
        }
        
        .tarjeta {
            background: white;
            padding: 25px;
            border-radius: 15px;
            margin: 15px 0;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        
        .tarjeta h3 { color: #06b6d4; margin-bottom: 15px; }
        
        /* Perfil */
        .perfil-input {
            width: 100%;
            padding: 12px;
            margin: 8px 0;
            border: 2px solid #06b6d4;
            border-radius: 8px;
            font-size: 1rem;
        }
        
        .perfil-btn {
            width: 100%;
            padding: 15px;
            margin-top: 10px;
            background: linear-gradient(135deg, #06b6d4, #0891b2);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1.1rem;
            cursor: pointer;
        }
        
        .perfil-btn:hover { transform: scale(1.02); }
        
        .perfil-display {
            padding: 20px;
            background: linear-gradient(135deg, #ecfeff, white);
            border-radius: 10px;
            margin-top: 15px;
            border: 2px solid #06b6d4;
        }
        
        .perfil-display p { margin: 8px 0; color: #0e7490; }
        .perfil-display strong { color: #06b6d4; }
        
        /* Contador persistente */
        .contador-display {
            font-size: 4rem;
            text-align: center;
            color: #06b6d4;
            font-weight: bold;
        }
        
        .contador-btns {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-top: 15px;
        }
        
        .contador-btns button {
            padding: 15px 30px;
            font-size: 1.5rem;
            border: none;
            border-radius: 10px;
            cursor: pointer;
        }
        
        .btn-sumar { background: #22c55e; color: white; }
        .btn-restar { background: #ef4444; color: white; }
        .btn-reset { background: #f59e0b; color: white; }
        
        /* Color favorito */
        .color-opciones {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .color-btn {
            width: 50px;
            height: 50px;
            border: 3px solid transparent;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .color-btn:hover { transform: scale(1.1); }
        .color-btn.activo { border-color: #1e293b; }
        
        .mensaje-color {
            text-align: center;
            padding: 15px;
            margin-top: 15px;
            border-radius: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>💾 LocalStorage en Acción</h1>
    
    <div class="contenedor">
        
        <div class="tarjeta">
            <h3>👤 Tu Perfil (se guarda)</h3>
            <input type="text" id="inputNombre" class="perfil-input" 
                   placeholder="Tu nombre">
            <input type="number" id="inputEdad" class="perfil-input" 
                   placeholder="Tu edad">
            <input type="text" id="inputColor" class="perfil-input" 
                   placeholder="Color favorito">
            <button class="perfil-btn" onclick="guardarPerfil()">
                💾 Guardar Perfil
            </button>
            <div class="perfil-display" id="perfilDisplay">
                <p>No hay perfil guardado</p>
            </div>
        </div>
        
        
        <div class="tarjeta">
            <h3>🔢 Contador que Recuerda</h3>
            <div class="contador-display" id="contador">0</div>
            <div class="contador-btns">
                <button class="btn-restar" onclick="cambiarContador(-1)">➖</button>
                <button class="btn-reset" onclick="resetContador()">🔄</button>
                <button class="btn-sumar" onclick="cambiarContador(1)">➕</button>
            </div>
        </div>
        
        
        <div class="tarjeta">
            <h3>🎨 Elige y Guarda tu Color</h3>
            <div class="color-opciones" id="colorOpciones">
                <button class="color-btn" style="background: #ef4444" onclick="elegirColor('#ef4444', 'Rojo')"></button>
                <button class="color-btn" style="background: #f97316" onclick="elegirColor('#f97316', 'Naranja')"></button>
                <button class="color-btn" style="background: #eab308" onclick="elegirColor('#eab308', 'Amarillo')"></button>
                <button class="color-btn" style="background: #22c55e" onclick="elegirColor('#22c55e', 'Verde')"></button>
                <button class="color-btn" style="background: #06b6d4" onclick="elegirColor('#06b6d4', 'Cyan')"></button>
                <button class="color-btn" style="background: #8b5cf6" onclick="elegirColor('#8b5cf6', 'Morado')"></button>
                <button class="color-btn" style="background: #ec4899" onclick="elegirColor('#ec4899', 'Rosa')"></button>
            </div>
            <div class="mensaje-color" id="mensajeColor">
                Elige un color
            </div>
        </div>
    </div>

👁️ Vista Previa Interactiva

LocalStorage - ¡Guarda información!

💾 ¿Qué es LocalStorage?

💡 Piensa en LocalStorage como...

🛠️ Métodos principales:

📝 Ejemplo práctico:

⚠️ Importante:

📦 Contenido actual del LocalStorage:

1. ¿Qué método usas para guardar datos en localStorage?

2. ¿Qué pasa con los datos de localStorage cuando cierras el navegador?

3. ¿Cómo obtienes un dato guardado en localStorage?