---

Objetivo:
Hoy aprenderás a trabajar con las principales APIs modernas del navegador, como LocalStorage, SessionStorage, Drag & Drop, Geolocalización, History API, FileReader e IndexedDB.
Estas tecnologías permiten a las aplicaciones web modernas almacenar datos, leer archivos, interactuar con el historial y ofrecer experiencias más dinámicas y enriquecidas.

---

📚 Formación Teórica

1. Objeto Date

• Crear y manejar fechas y horas en JavaScript.

2. LocalStorage y SessionStorage (Revisión)

• localStorage: Guarda datos de manera persistente hasta que el usuario o la app los elimine.
• sessionStorage: Guarda datos durante la sesión del navegador (se borra al cerrar pestaña).

3. Drag & Drop API

• Permite arrastrar y soltar elementos dentro del navegador, útil para mejorar la interacción con el usuario.

4. Geolocalización

• Permite obtener la ubicación geográfica del usuario mediante el navegador.

5. History API

• Permite manipular el historial del navegador sin recargar la página (ideal para SPAs).

6. FileReader API

• Permite a las aplicaciones web leer archivos locales del usuario (por ejemplo, imágenes).

7. IndexedDB

• Base de datos local dentro del navegador para almacenar grandes cantidades de datos de manera estructurada.

---

🎥 Vídeos de hoy

• ✅ APIs modernas: almacenamiento, archivos, geolocalización
  (Desde 1:40:32 hasta 4:46:41 aproximadamente)

Instrucciones para el vídeo:

• Observa cómo se utilizan las diferentes APIs del navegador para hacer que las aplicaciones sean más potentes y eficientes.
• Presta atención especial a IndexedDB como una forma de almacenamiento avanzado.

---

🧠 Apuntes Técnicos del Día

📌 Objeto Date

let ahora = new Date();
console.log(ahora.toString());
console.log(ahora.getFullYear());

• Date permite trabajar con fechas y horas actuales o específicas.

---

📌 localStorage y sessionStorage

// Guardar datos
localStorage.setItem("nombre", "Jesús");
sessionStorage.setItem("sesionActiva", "true");

// Leer datos
let nombre = localStorage.getItem("nombre");
let sesion = sessionStorage.getItem("sesionActiva");

// Borrar datos
localStorage.removeItem("nombre");
sessionStorage.removeItem("sesionActiva");

• Muy útiles para almacenar preferencias, sesiones de usuario, configuraciones locales.

---

📌 Drag & Drop básico

function permitirDrop(ev) {
  ev.preventDefault();
}

function arrastrar(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function soltar(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

• Facilita mover elementos de un lugar a otro dentro de la página.

---

📌 Geolocalización

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log(position.coords.latitude, position.coords.longitude);
  },
  (error) => {
    console.error(error);
  }
);

• Requiere consentimiento del usuario.

---

📌 History API

history.pushState({page: 1}, "Título 1", "?page=1");
history.back(); // Ir hacia atrás
history.forward(); // Ir hacia adelante

• Permite manipular el historial sin recargar la página, útil para aplicaciones de una sola página (SPA).

---

📌 FileReader API

const input = document.querySelector("input[type='file']");
input.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = (e) => {
    console.log(e.target.result);
  };
  reader.readAsText(file);
});

• Permite leer archivos locales (texto, imágenes, etc.).

---

📌 IndexedDB (Introducción básica)

let db;
const request = indexedDB.open("MiBaseDeDatos", 1);

request.onsuccess = function(event) {
  db = event.target.result;
  console.log("Base de datos abierta con éxito");
};

request.onerror = function(event) {
  console.error("Error al abrir la base de datos", event);
};

• Ideal para almacenar gran cantidad de datos offline en aplicaciones web.

---

🛠️ Tareas prácticas del Día 27

Tarea 1 — Uso de localStorage y sessionStorage:

• Crea una página donde se almacene el nombre del usuario en localStorage.
• Al entrar de nuevo a la página, saluda automáticamente al usuario usando su nombre.

Tarea 2 — Implementar Drag & Drop básico:

• Crea dos cajas (div) y permite arrastrar un objeto (por ejemplo, una imagen o un texto) de una caja a la otra.

Tarea 3 — Obtener ubicación con Geolocalización:

• Crea un botón que al pulsarlo obtenga la ubicación del usuario y la muestre en pantalla.

Tarea 4 — Cargar y leer archivo con FileReader:

• Permite que el usuario seleccione un archivo .txt y muestra su contenido en un div.

Entrega:

• Crea un documento PDF donde adjuntes:
  • Código fuente de todas las tareas.
  • Capturas de pantalla mostrando la ejecución de las tareas.

---

🚀 Resultado esperado al finalizar el día

• Conocer y utilizar las APIs modernas más importantes del navegador.
• Leer y almacenar datos de forma avanzada en el cliente.
• Interactuar de forma profesional con funcionalidades locales como archivos, historial y ubicación.

---