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
1. Clipboard 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.
const writeToClipboard = async (text) => {
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);
}
};
2. LocalStorage API 💾🛍️
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.
// Storing data to the local storage
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();
3. SessionStorage API 💾🛍️
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.
// Storing data to the session storage
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();
4. Geolocation API 🌍📍
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:
const getCurrentLocation = () => {
navigator.geolocation.getCurrentPosition(
position => {
const coord = position.coords;
console.log(coord.latitude); // 51.51260833333333
console.log(coord.longitude); // -0.2191388888888889
},
err => {
console.log(err);
}
)
};
5. Location API 🗺️🌐
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.
// assume the Broweser URL is "https://www.example.com/page?param=value#section"
// 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
6. History API ⏳📚
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:
// Go back in history
window.history.back();
// Go forward in history
window.history.forward();
7. Fetch API 🚀🔗
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.
const getTodoData = async () => {
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!
Top comments (0)