Web APIs & Browser Storage

Web APIs allow JavaScript to communicate with browser features, while Browser Storage allows web applications to store data inside the browser.

What are Web APIs?

Web APIs are browser-provided interfaces that allow JavaScript to interact with the browser and perform different operations such as working with the DOM, making network requests, accessing storage, and interacting with other browser features.

Simple Definition

Web APIs are browser-provided tools that JavaScript can use to communicate with and control browser features.

How Web APIs Work

JavaScript

→

Web API

→

Browser

→

Result

JavaScript can interact with important browser objects such as Window, Document and Navigator.

Common Web APIs

• DOM API – Used to work with HTML elements and page content.

• Fetch API – Used to make HTTP/network requests.

• Storage API – Used to store information in the browser.

• Geolocation API – Used to access geographical location with permission.

• Console API – Used for debugging JavaScript applications.

What is Browser Storage?

Browser Storage allows websites to save small amounts of data inside the user's browser. This data can be used to remember preferences, settings, or other application information.

Main Types of Browser Storage

Local Storage stores data in the browser and keeps it even after the browser is closed.

Session Storage stores data for the current browser session.

Example 1: localStorage

The setItem() method is used to store data in localStorage.

localStorage.setItem("username", "Rahul");

var username = localStorage.getItem("username");

console.log(username);

Output:
Rahul

Example 2: sessionStorage

The setItem() method can also be used with sessionStorage to store data for the current browser session.

sessionStorage.setItem("course", "JavaScript");

var course = sessionStorage.getItem("course");

console.log(course);

Output:
JavaScript

Important Points

• Web APIs are provided by the browser.

• JavaScript can use Web APIs to interact with browser features.

• localStorage stores data permanently until it is removed.

• sessionStorage stores data for the current browser session.

• Browser Storage works using key-value pairs.

Compiler Note:
The CIIT JavaScript Compiler is console-based. The Try It buttons open the CIIT compiler with compiler-safe JavaScript code so that the result appears in the compiler output window.

Summary

Web APIs provide browser functionality that JavaScript applications can use. Browser Storage allows web applications to store data inside the browser. Local Storage and Session Storage are commonly used browser storage mechanisms.