Hey There, 👋 Awesome Developers! 🚀
Today, let’s learn about the top 7 JavaScript Web APIs that are absolute game-changers! 🚀🌐
These APIs provide developers with powerful functionalities to enhance user experience, manipulate data, and interact with various browser features. They are Clipboard API, LocalStorage API, SessionStorage API, Geolocation API, Location API, History API, and Fetch API.
In this, We’ll cover these with basic code examples:
Clipboard API
LocalStorage API
SessionStorage API
Geolocation API
Location API
History API
Fetch API
The Clipboard API provides access to interact with the system clipboard, allowing users to copy and paste content. you can use it to build a copy button to copy/paste content.
Below is a basic example demonstrating how to copy and paste in the clipboard.
try {
await navigator.clipboard.writeText(text);
console.log(text);
} catch (error) {
console.log(error);
}
};
const readFromClipboard = async () => {
try {
const clipboardText = await navigator.clipboard.readText();
console.log(clipboardText);
} catch (error) {
console.log(error);
}
};
The LocalStorage API provides a simple key-value storage mechanism with the user’s browser. It allows developers to store data persistently across the sessions. Here’s an example of storing, retrieving, and removing data using the LocalStorage API.
Local storage usually only holds up to 10MB in all browsers. But, in Mozilla Firefox, you can make it hold up to 2GB if you change some settings.
localStorage.setItem(“words“, “winter is coming!“);
// retrieving data from the local storage
const username = localStorage.getItem(“words“);
console.log(username); // winter is coming!
// removing specific data from the local storage
localStorage.removeItem(“words“);
// removing all the stored data from the local storage
localStorage.clear();
Similiar to local storage, The SessionStorage API stores data within the user’s browser. However, Data stored using SessionStorage is cleared when the browsing session ends.
sessionStorage.setItem(“words“, “winter is coming!“);
// retrieving data from the session storage
const username = sessionStorage.getItem(“words“);
console.log(username); // winter is coming!
// removing specific data from the session storage
sessionStorage.removeItem(“words“);
// removing all the stored data from the session storage
sessionStorage.clear();
The Geolocation API enables web applications to access the user’s geographical latitudes and longitudes. Here’s How you can retrieve the user’s current location:
navigator.geolocation.getCurrentPosition(
position => {
const coord = position.coords;
console.log(coord.latitude); // 51.51260833333333
console.log(coord.longitude); // -0.2191388888888889
},
err => {
console.log(err);
}
)
};
The Location API is a handy tool for developers. It helps them deal with where things are on the internet. With it, they can get helpful details from web addresses. This makes it easier for them to make websites that can do different things based on where they are. For example, they can use it to redirect users to another page or replace the current page with new content.
// Interacting with the Current URL
const currentURL = window.location.href;
console.log(currentURL); // https://www.example.com/page?param=value#section
const host = window.location.host;
console.log(host); // www.example.com
const hostname = window.location.hostname;
console.log(hostname); // www.example.com
const port = window.location.port;
console.log(port) // (depends on the actual URL, might be empty or specific port number);
const protocol = window.location.protocol;
console.log(protocol); // https:
const pathname = window.location.pathname;
console.log(pathname); // /page
const hash = window.location.hash;
console.log(hash); // #section
const searchParams = new URLSearchParams(window.location.search);
console.log(searchParams); // URLSearchParams { ‘param’ => ‘value’ }
const paramValue = searchParams.get(‘param‘);
console.log(paramValue); // value
// Setting the Current URL
window.location.assign(‘https://www.example.com‘); // Redirect to a new URL
window.location.replace(‘https://www.example.com‘); // Replace the current URL with a new one
The History API allows you to manipulate the browser’s session history, enabling seamless navigation within single-page applications. Below is an example of navigating through the browser history:
window.history.back();
// Go forward in history
window.history.forward();
The Fetch API provides a modern interface for fetching resources asynchronously across the network by calling REST APIs or GraphQL APIs. It offers a more powerful and flexible alternative to traditional XMLHttpRequest.
try {
const res = await fetch(“https://jsonplaceholder.typicode.com/todos/1“);
const data = await res.json();
return data;
} catch (error) {
console.log(error);
}
}
const todoData = getTodoData();
console.log(todoData); // { “userId”: 1, “id”: 1, “title”: “delectus aut autem”, “completed”: false }
That’s it 😁
Thank you for reading! If you found this article helpful, please share your thoughts in the comments. Additionally, if you noticed any mistakes, sharing them will help me improve. Your feedback is greatly appreciated!
And Don’t forgot to give a “💖 🦄 🤯 🙌 🔥” if you enjoyed it!
