Essential Web APIs Every JavaScript Developer Should Know
Explore essential browser Web APIs: Intersection Observer, Web Storage, Clipboard, Geolocation, and more.
Intersection Observer
Detect when elements enter or leave the viewport — perfect for lazy loading and infinite scroll.
``javascript
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
// Lazy load image
if (entry.target.dataset.src) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.lazy-img').forEach(img => observer.observe(img));
`
Web Storage API
`javascript
// localStorage - persists after browser close
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');
localStorage.removeItem('theme');
// sessionStorage - cleared when tab closes
sessionStorage.setItem('tempData', JSON.stringify({ step: 3 }));
const data = JSON.parse(sessionStorage.getItem('tempData'));
`
Clipboard API
`javascript
// Copy to clipboard
async function copyText(text) {
try {
await navigator.clipboard.writeText(text);
console.log('Copied!');
} catch (err) {
console.error('Failed to copy:', err);
}
}
// Read from clipboard
async function pasteText() {
const text = await navigator.clipboard.readText();
return text;
}
`
Fetch API with AbortController
`javascript
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);
try {
const response = await fetch('/api/data', {
signal: controller.signal
});
const data = await response.json();
clearTimeout(timeoutId);
} catch (err) {
if (err.name === 'AbortError') {
console.log('Request timed out');
}
}
`
Broadcast Channel
`javascript
// Communicate between tabs/windows
const channel = new BroadcastChannel('app-events');
channel.postMessage({ type: 'LOGOUT' });
channel.onmessage = (event) => {
if (event.data.type === 'LOGOUT') {
window.location.href = '/login';
}
};
`
structuredClone
`javascript
const original = {
name: 'Alice',
dates: [new Date()],
nested: { deep: { value: 42 } }
};
const clone = structuredClone(original);
clone.nested.deep.value = 99;
console.log(original.nested.deep.value); // 42 (unchanged!)
`
URLSearchParams
`javascript
const params = new URLSearchParams(window.location.search);
params.get('page'); // '2'
params.set('sort', 'date');
params.delete('filter');
console.log(params.toString()); // 'page=2&sort=date'
``
Summary
Modern Web APIs eliminate the need for many libraries. Use Intersection Observer for visibility detection, Web Storage for persistence, Clipboard API for copy/paste, and structuredClone for deep copying.