HTML5 Web APIs & Client Storage

1. Modern Client Storage & Web Platform APIs

HTML5 revolutionized web development by giving browsers native capabilities once exclusive to desktop applications: rich client-side persistence, hardware sensor access, background multi-threading, and 2D/3D hardware-accelerated rendering.

2. Client Storage Comparison Matrix

Choosing the correct storage mechanism is a common architectural decision tested in technical placement interviews:

3. Interactive LocalStorage State & Theme Controller

The code below demonstrates storing structured state with JSON serialization and handling live user preferences:

// Save object to localStorage (JSON Serialization)
function saveUserData(user) {
  localStorage.setItem('candidate', JSON.stringify(user));
}

// Retrieve & parse from localStorage
function loadUserData() {
  const raw = localStorage.getItem('candidate');
  return raw ? JSON.parse(raw) : { name: 'Anshuman', score: 85 };
}

// Clear specific key or wipe entire origin
function clearData() {
  localStorage.removeItem('candidate');
  // localStorage.clear(); // Wipes all keys
}

4. Geolocation & HTML5 Canvas 2D Rendering

The Geolocation API retrieves hardware GPS or network-triangulated coordinates with explicit user permission, while the <canvas> element offers a programmable bitmap drawing surface:

// 1. Geolocation API with robust error handling
if ('geolocation' in navigator) {
  navigator.geolocation.getCurrentPosition(
    (pos) => {
      console.log(`Latitude: ${pos.coords.latitude}, Longitude: ${pos.coords.longitude}`);
    },
    (err) => {
      console.warn('Location error code:', err.code, err.message);
    },
    { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
  );
}

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

// Draw glowing gradient rectangle
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, '#6366F1');
gradient.addColorStop(1, '#3B82F6');
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 160, 80);

5. Test Your Knowledge: HTML5 APIs & Storage Quiz

Evaluate your understanding of client persistence, XSS vulnerabilities, and Web APIs: