← Previous Next →

Browser APIs

Browser APIs provide interfaces for JavaScript to interact with the web browser environment, enabling features beyond basic JavaScript capabilities.

Illustration of Browser APIs
Illustration of Browser APIs

💡 What Are Browser APIs?

Browser APIs are built-in objects and methods exposed by web browsers, allowing scripts to control and utilize browser features like DOM manipulation, storage, networking, and more.

Commonly Used Browser APIs

  • DOM API: Access and manipulate HTML elements dynamically.
  • Fetch API: Make network requests to retrieve or send data asynchronously.
  • LocalStorage / SessionStorage: Store data in the browser persistently or per session.
  • Geolocation API: Access the user's geographical location.
  • Canvas API: Draw and animate graphics.
  • Web Storage API: Manage key-value pairs in the browser.
  • Notification API: Display system notifications to users.

💡 Why Use Browser APIs?

They enable rich, interactive web applications with access to hardware, network, and browser features, improving user experience.

Browser API Access Example: Fetch API

The fetch() method is a modern way to request resources asynchronously.

📌 Deep Dive: Fetching Data

JAVASCRIPT
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
Output
Logs JSON data from the API or errors to the console.

How Browser APIs Relate to the DOM

The Document Object Model (DOM) API lets you read and modify HTML elements in the page dynamically.

📌 Deep Dive: DOM Manipulation

JAVASCRIPT
document.getElementById('title').textContent = 'Updated Title';
Effect
Changes the text content of the element with id="title".

Comparison of Storage APIs

LocalStorage vs SessionStorage
FeatureLocalStorageSessionStorage
PersistenceData persists after browser closesData cleared when tab/window closes
ScopeShared across all tabs for the same domainSpecific to a single tab or window
Storage LimitUsually around 5MBUsually around 5MB
Use CaseRemember user preferences or tokensTemporary data during a session

⚠️ Security Consideration

Browser APIs can expose sensitive data or permissions. Always handle data carefully and ensure permissions (e.g., geolocation) are requested transparently.

Accessing Geolocation

This API requests the user's permission to access their location.

📌 Deep Dive: Geolocation API

JAVASCRIPT
navigator.geolocation.getCurrentPosition(position => {
  console.log('Latitude:', position.coords.latitude);
  console.log('Longitude:', position.coords.longitude);
}, error => {
  console.error('Error getting location:', error);
});
Output
Logs latitude and longitude if permission granted, else logs error.

💡 How to Explore Browser APIs

Use the browser's developer console to inspect objects like window, navigator, and document. MDN Web Docs is an excellent resource for API details and usage examples.

← Previous Next →