Web APIs and Browser Features - Modern JavaScript APIs Guide

Modern browsers expose a rich set of Web APIs that allow developers to access device hardware, manipulate data, and create powerful user experiences.

From making HTTP requests with the Fetch API to detecting scroll positions with IntersectionObserver, these APIs unlock capabilities beyond basic DOM manipulation.

This guide covers the most important and widely used Web APIs with practical examples for real-world applications.

Fetch API

The Fetch API provides a modern, promise-based interface for making HTTP requests, replacing the older XMLHttpRequest approach.

              
            
JavaScript

          GET and POST requests using Fetch API
        
// GET request
const getData = async () => {
  const res = await fetch('https://api.example.com/data');
  if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
  return await res.json();
};

// POST request with headers
const postData = async (payload) => {
  const res = await fetch('/api/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });
  return await res.json();
};

Web Storage - localStorage and sessionStorage

Web Storage APIs allow you to persist data in the user's browser. localStorage persists across sessions, while sessionStorage is cleared when the tab closes.

              
            
JavaScript

          localStorage read, write, and delete operations
        
// Save data
localStorage.setItem('theme', 'dark');
localStorage.setItem('user', JSON.stringify({ name: 'Alice', id: 1 }));

// Read data
const theme = localStorage.getItem('theme');
const user = JSON.parse(localStorage.getItem('user'));

// Remove item
localStorage.removeItem('theme');

// Clear all
localStorage.clear();

localStorage can store up to 5–10MB of data per origin and is great for user preferences, tokens, and cached app state.

IntersectionObserver API

The IntersectionObserver API lets you detect when an element enters or exits the viewport, perfect for lazy loading, infinite scroll, and scroll animations.

              
            
JavaScript

          Lazy loading images with IntersectionObserver
        
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.add('loaded');
      observer.unobserve(img);
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

Geolocation API

The Geolocation API allows web apps to access the user's geographic location with their permission, enabling location-based features.

              
            
JavaScript

          Getting user's current position
        
function getUserLocation() {
  if (!navigator.geolocation) {
    console.log('Geolocation not supported');
    return;
  }

  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude } = position.coords;
      console.log(`Lat: ${latitude}, Lng: ${longitude}`);
    },
    (error) => {
      console.error('Location error:', error.message);
    }
  );
}

More Powerful Web APIs

Web Workers - run JavaScript in background threads without blocking the UI
Clipboard API - read from and write to the system clipboard
Notification API - show native browser notifications to users
IndexedDB - store large amounts of structured data client-side
Canvas API - draw graphics, charts, and images programmatically
Web Speech API - add speech recognition and synthesis to web apps
History API - manipulate browser URL without page reloads
ResizeObserver - respond to element size changes dynamically

Conclusion

Web APIs and browser features empower developers to build richer, faster, and more capable web applications without relying on third-party plugins.

By leveraging APIs like Fetch, IntersectionObserver, and Web Workers, you can dramatically improve both user experience and application performance.