12 Essential Web APIs Every Developer Should Know

Web APIs provide developers with powerful tools to create modern web applications. These essential web APIs every developer should know enable seamless functionality, enhancing the user experience.

1. Storage API

The Storage API enables developers to store and retrieve data locally in the browser, offering persistence between sessions.

Why It’s Useful:

• LocalStorage and SessionStorage allow storing key-value pairs, making it easy to save user preferences or temporary data.
• IndexedDB is a more advanced solution for large-scale data storage.

Code Example:

// Local Storage
localStorage.setItem('key', 'value');
console.log(localStorage.getItem('key'));

// Session Storage
sessionStorage.setItem('sessionKey', 'sessionValue');
console.log(sessionStorage.getItem('sessionKey'));

2. DOM API

The Document Object Model (DOM) API provides a structured representation of the webpage, allowing developers to manipulate HTML and CSS dynamically.

Why It’s Useful:

• Enables dynamic updates to content, style, and structure without reloading the page.

Code Example:

// Creating and appending a new element
const div = document.createElement('div');
div.textContent = 'Hello, DOM API!';
document.body.appendChild(div);

// Selecting an element and modifying it
const element = document.querySelector('div');
element.style.color = 'blue';

3. HTML Sanitizer API

The HTML Sanitizer API helps protect against cross-site scripting (XSS) attacks by sanitizing untrusted HTML.

Why It’s Useful:

• Ensures user input or third-party HTML content is safe to render in the DOM.

Code Example:

const dirty = 'Clean content';
const sanitizer = new Sanitizer();
const clean = sanitizer.sanitize(dirty);
document.body.innerHTML = clean; 

4. Canvas API

The Canvas API allows developers to draw graphics, animations, and even games directly in the browser.

Why It’s Useful:

• Perfect for creating custom visualizations and game development.

Code Example:

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = 200;
canvas.height = 200;

const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

5. History API

The History API allows you to manipulate the browser session history, providing smoother navigation experiences.

Why It’s Useful:

• Enables single-page applications (SPAs) to change URLs without reloading.

Code Example:

// Push a new state
history.pushState({ page: 1 }, 'Title', '?page=1');

// Handle state change
window.onpopstate = (event) => {
  console.log('State:', event.state);
};

6. Clipboard API

The Clipboard API allows web applications to interact with the clipboard for copying and pasting content.

Why It’s Useful:

• Enhances user experience by enabling seamless copy-paste functionality.

Code Example:

// Write to clipboard
navigator.clipboard.writeText('Hello Clipboard API!');

// Read from clipboard
navigator.clipboard.readText().then((text) => {
  console.log('Clipboard text:', text);
});

7. Fullscreen API

The Fullscreen API lets developers display elements in fullscreen mode.

Why It’s Useful:

• Ideal for video players, image galleries, and immersive experiences.

Code Example:

const element = document.documentElement;

// Request fullscreen
element.requestFullscreen().then(() => console.log('Fullscreen mode'));

// Exit fullscreen
document.exitFullscreen().then(() => console.log('Exited fullscreen'));

8. FormData API

The FormData API simplifies working with form data, especially when sending data via fetch.

Why It’s Useful:

• Handles encoding and submission of form data seamlessly.

Code Example:

const formData = new FormData();
formData.append('name', 'John');
formData.append('file', new File(['content'], 'example.txt'));

fetch('/upload', {
  method: 'POST',
  body: formData,
});

9. Fetch API

The Fetch API is a modern, promise-based API for making HTTP requests.

Why It’s Useful:

• Replaces XMLHttpRequest with a cleaner and more flexible syntax.

Code Example:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error('Error:', error));

10. Drag and Drop API

The Drag and Drop API allows users to drag and drop items within or between web pages.

Why It’s Useful:

• Great for building interactive applications like file uploaders or custom UI builders.

Code Example:

const draggable = document.createElement('div');
draggable.textContent = 'Drag me!';
draggable.setAttribute('draggable', 'true');
document.body.appendChild(draggable);

draggable.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', 'Hello, Drag and Drop!');
});

document.body.addEventListener('drop', (event) => {
  event.preventDefault();
  const data = event.dataTransfer.getData('text/plain');
  alert(data);
});

document.body.addEventListener('dragover', (event) => event.preventDefault());

11. Geolocation API

The Geolocation API retrieves the user’s location, enabling location-based services.

Why It’s Useful:

• Essential for applications like maps, navigation, or local service recommendations.

Code Example:

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log('Latitude:', position.coords.latitude);
    console.log('Longitude:', position.coords.longitude);
  },
  (error) => console.error('Error:', error.message)
);

12. Payment Request API

The Payment Request API simplifies the process of collecting and processing payments on the web.

Why It’s Useful:

• Reduces friction in checkout flows, improving user experience.

Code Example:

const paymentRequest = new PaymentRequest(
  [{ supportedMethods: 'basic-card' }],
  {
    total: { label: 'Total', amount: { currency: 'USD', value: '10.00' } },
  }
);

paymentRequest.show().then((paymentResponse) => {
  console.log(paymentResponse.details);
  paymentResponse.complete('success');
});

Conclusion

These 12 essential web APIs empower developers to create feature-rich, dynamic, and user-friendly web applications. By mastering these essential web APIs every developer should know, you can streamline your workflow and create feature-rich applications.Whether you’re building interactive graphics, collecting form data, or processing payments, these APIs have you covered!

Explore more Blogs

Follow us