LocalStorage y SessionStorage:
// LocalStorage (persistente)
localStorage.setItem('usuario', 'Juan');
const usuario = localStorage.getItem('usuario');
localStorage.removeItem('usuario');
localStorage.clear();
// SessionStorage (sesión)
sessionStorage.setItem('token', 'abc123');
const token = sessionStorage.getItem('token');
// Almacenar objetos
const datos = { nombre: 'Juan', edad: 30 };
localStorage.setItem('datos', JSON.stringify(datos));
const datosGuardados = JSON.parse(localStorage.getItem('datos'));
Geolocation API:
// Obtener ubicación
navigator.geolocation.getCurrentPosition(
(position) => {
console.log('Lat:', position.coords.latitude);
console.log('Lng:', position.coords.longitude);
},
(error) => console.error(error)
);
// Watch position
const watchId = navigator.geolocation.watchPosition(
(position) => console.log(position.coords)
);
// Clear watch
navigator.geolocation.clearWatch(watchId);
Canvas API:
<canvas id="miCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('miCanvas');
const ctx = canvas.getContext('2d');
// Dibujar rectángulo
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
// Dibujar línea
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 200);
ctx.stroke();
// Dibujar círculo
ctx.beginPath();
ctx.arc(300, 150, 50, 0, Math.PI * 2);
ctx.fill();
</script>
Drag and Drop API:
<div draggable="true" id="draggable">Arrástrame</div>
<div id="dropzone">Suelta aquí</div>
<script>
const draggable = document.getElementById('draggable');
const dropzone = document.getElementById('dropzone');
draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
});
dropzone.addEventListener('dragover', (e) => {
e.preventDefault();
});
dropzone.addEventListener('drop', (e) => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
e.target.appendChild(document.getElementById(id));
});
</script>