Brtest Tutorial
JavaScript Browser API
The Browser API (Application Programming Interface) lets JavaScript interact with the web browser and the user’s environment. You can store data, get user location, open new windows, and more.
What Is the Browser API?
APIs (Application Programming Interfaces) are built into browsers to let JavaScript perform advanced tasks beyond the web page itself. Common browser APIs include:
- Web Storage API - Save and retrieve data in the browser
- Geolocation API - Get the user's location
- History API - Navigate browser history
- Window API - Work with the browser window
- Fetch API - Request data from web servers
Web Storage API
The Web Storage API provides two storage objects:
localStorage— stores data with no expiration datesessionStorage— stores data until the browser is closed
Example
Save and retrieve data with localStorage:
<button onclick="saveName()">Save Name</button>
<button onclick="showName()">Show Name</button>
<p id='output'></p>
<script>
function saveName() {
localStorage.setItem('username', 'Bo');
}
function showName() {
const name = localStorage.getItem('username');
document.getElementById('output').textContent = name ? 'Hello, ' + name : 'No name saved';
}
</script>
Try it Yourself »
Tip: Use localStorage.removeItem('key') or localStorage.clear() to delete stored data.
Session Storage
sessionStorage works the same way as localStorage, but the data disappears when you close the tab.
Example
Using sessionStorage:
<button onclick="countVisit()">Count Visit</button>
<p id='count'></p>
<script>
function countVisit() {
let count = sessionStorage.getItem('visits') || 0;
count++;
sessionStorage.setItem('visits', count);
document.getElementById('count').textContent = 'Visits this session: ' + count;
}
</script>
Try it Yourself »
Geolocation API
The Geolocation API lets you get the user's location (with their permission). This can be useful for maps, weather updates, or location-based content.
Example
Get your coordinates:
<button onclick="getLocation()">Get My Location</button>
<p id='loc'></p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
document.getElementById('loc').textContent = 'Geolocation not supported';
}
}
function showPosition(pos) {
document.getElementById('loc').textContent = 'Latitude: ' + pos.coords.latitude + ', Longitude: ' + pos.coords.longitude;
}
function showError() {
document.getElementById('loc').textContent = 'Unable to retrieve location.';
}
</script>
Try it Yourself »
Note: The Geolocation API requires a secure (HTTPS) connection to work.
History API
The History API lets you navigate the browser’s session history and change URLs dynamically.
Example
Move back and forward:
<button onclick="goBack()">Go Back</button>
<button onclick="goForward()">Go Forward</button>
<script>
function goBack() { window.history.back(); }
function goForward() { window.history.forward(); }
</script>
Try it Yourself »
Window API
The window object represents the browser window and allows you to open, close, and resize windows or interact with alerts and prompts.
Example
Working with window methods:
alert('Hello from JavaScript!');
const name = prompt('What is your name?');
if (name) alert('Welcome, ' + name + '!');
// Open a new window
// const newWin = window.open('https://www.w3schools.com', '_blank');
Try it Yourself »
Fetch API
The Fetch API is used to make HTTP requests to servers and work with data such as JSON.
Example
Get data from an API:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
Try it Yourself »
Best Practices
- Always check if an API is available before using it (e.g.,
if (navigator.geolocation)). - Use
try...catchor.catch()to handle errors safely. - Store only simple data (strings, numbers, JSON) in
localStorage. - Respect user privacy when accessing location or personal data.
Summary
- Browser APIs extend what JavaScript can do inside the browser.
- Web Storage saves data locally or per session.
- Geolocation gets user coordinates (with permission).
- History and Window APIs let you control navigation and interaction.
- Fetch API lets you get and send data to servers.
Next, you’ll use these browser features to build a Weather App Project that fetches real-time weather data using the Fetch and Geolocation APIs.
