What You'll Learn

Geolocation API for location-based features

Web Storage (localStorage & sessionStorage)

Canvas API for graphics and animations

Web Workers for background processing

File API for file handling

Drag & Drop API for interactive UIs

1. Geolocation API

The Geolocation API allows web applications to access the user's geographical location. Perfect for location-based services, maps, and navigation apps.

javascript

// Get user's current position
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      console.log('Latitude:', position.coords.latitude);
      console.log('Longitude:', position.coords.longitude);
      console.log('Accuracy:', position.coords.accuracy, 'meters');
    },
    (error) => {
      console.error('Error:', error.message);
    }
  );
} else {
  console.error('Geolocation not supported');
}

Try Geolocation API

⚠️ Privacy Note:

Always request user permission before accessing location. Users can deny access, so handle errors gracefully.

2. Web Storage API

Web Storage provides two mechanisms: localStorage (persistent) and sessionStorage (session-only). Perfect for storing user preferences, form data, and app state.

localStorage vs sessionStorage

Feature	localStorage	sessionStorage
Persistence	Persists until cleared	Cleared when tab closes
Scope	Shared across tabs	Tab-specific
Use Case	User preferences, settings	Temporary form data

javascript

// localStorage - persists across sessions
localStorage.setItem('username', 'John');
const username = localStorage.getItem('username');
localStorage.removeItem('username');
localStorage.clear(); // Clear all

// sessionStorage - cleared when tab closes
sessionStorage.setItem('tempData', 'value');
const temp = sessionStorage.getItem('tempData');

Try Web Storage API

Enter value to store:

💡 Pro Tip:

localStorage can store up to 5-10MB of data. Always handle storage quota errors and validate data before storing.

3. Canvas API

The Canvas API provides a powerful way to draw graphics, animations, and interactive content using JavaScript. Perfect for games, data visualization, and image editing.

javascript

// Basic Canvas Drawing
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Draw a rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);

// Draw a circle
ctx.beginPath();
ctx.arc(150, 60, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();

// Draw text
ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas!', 10, 150);

Canvas Example

4. Web Workers API

Web Workers allow you to run JavaScript in background threads, preventing heavy computations from blocking the main UI thread. Perfect for data processing, image manipulation, and complex calculations.

javascript

// main.js - Create a worker
const worker = new Worker('worker.js');

// Send data to worker
worker.postMessage({ numbers: [1, 2, 3, 4, 5] });

// Receive result from worker
worker.onmessage = (e) => {
  console.log('Result:', e.data);
};

// worker.js - Background processing
self.onmessage = (e) => {
  const numbers = e.data.numbers;
  const sum = numbers.reduce((a, b) => a + b, 0);
  self.postMessage({ result: sum });
};

💡 Use Cases:

Heavy data processing
Image filtering and manipulation
Complex mathematical calculations
Real-time data analysis

5. File API

The File API allows web applications to access files selected by users. Perfect for file uploads, image previews, and file processing.

javascript

// Handle file input
const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  
  if (file) {
    const reader = new FileReader();
    
    reader.onload = (e) => {
      const content = e.target.result;
      console.log('File content:', content);
    };
    
    // Read as text
    reader.readAsText(file);
    
    // Or read as data URL (for images)
    // reader.readAsDataURL(file);
  }
});

6. Drag & Drop API

The Drag & Drop API enables native drag-and-drop functionality in HTML5. Perfect for file uploads, reordering lists, and interactive UIs.

html

// Make element draggable
<div draggable="true" id="dragElement">
  Drag me!
</div>

// JavaScript
const dragElement = document.getElementById('dragElement');

dragElement.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', dragElement.id);
});

// Drop zone
const dropZone = document.getElementById('dropZone');

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();
});

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  const data = e.dataTransfer.getData('text/plain');
  // Handle drop
});

Final Thoughts

HTML5 APIs unlock powerful capabilities for modern web applications. From location services to background processing, these APIs enable rich, interactive experiences.

Remember to always check browser compatibility and provide fallbacks for older browsers. Use these APIs responsibly, especially when dealing with user privacy and data.