There are plenty of native web APIs that have a variety of uses.
Here are 5 useful APIs that I use quite often in my web development projects.
Clipboard API
The clipboard API is a simple method to copy text to a user's clipboard.
This can be used in a wide range of applications such as URL shorteners or blogs, where you want to add a copy button to copy content.
To copy text, you first need an element on the DOM with the text:
<input type="text" value="Text to be copied" id="copy-text">
Now, we can write a quick JavaScript function to copy this text:
const writeToClipboard = () => {
const textToBeCopied = document.getElementById("copy-text");
textToBeCopied.select();
textToBeCopied.setSelectionRange(0, 99999);
navigator.clipboard.writeText(textToBeCopied.value);
}
This function can be called however you'd like, such as on click of a copy button.
LocalStorage API
LocalStorage provides a simple interface for storing data locally in your user's browser.
Its very similar to session storage and cookies, with the key difference that is does not expire.
There are three main methods you can use.
To store data, you can use .setItem()
localStorage.setItem('key', 'value');
Items are stored as key/value pairs in localStorage.
To retrieve an item from localStorage, you can use .getItem()
localStorage.getItem('key');
Lastly, to remove an item from localStorage, you can use .removeItem()
localStorage.removeItem('key');
Items are stored as strings in localStorage, so to store an object or array, you need to use the JSON.stringify() method.
const people = ['Blake', 'John', 'Jane'];
localStorage.setItem('people', JSON.stringfy(people));
Then when we get the item, we can use JSON.parse() to convert it back to an array.
const people = JSON.parse(localStorage.getItem('people'));
That sums up localStorage, now lets move on to the Geolocation API.
Geolocation API
The Geolocation API is a simple interface to get the user's location.
This can be used to personalize your website to your users.
For example, you could add a nearby stores section or show deals available for the user's specific location.
To get the users location, you can use the getCurrentPosition() method.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
console.log(position);
});
}
position is a object with the user's coordinates as well as timestamp.
History API
The history API allows you to navigate the user back and forward among pages.
For example, to simulate the user clicking the back button:
window.history.back()
And the forward button:
window.history.forward()
Yes, its that simple.
Fetch API
The fetch API is a interface for making HTTP requests.
It cna be used as an alternative to packages like axios or built-in methods like XMLHttpRequest
To make a GET request:
async function makeRequest() {
const response = await fetch('request url...');
const json = await response.json();
console.log(json);
}
To make a POST request:
fetch('request url...', {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
I have another article all about the Fetch API that dives into deeper detail.
Check it out here if you're interested.
Wrapping Up
We have covered 5 useful native web APIs discussed in this article: Clipboard API for copying text, LocalStorage API for storing data, Geolocation API for getting user's location, History API for navigating pages, and Fetch API for making HTTP requests.
Each API is explained with examples and usage instructions.
👌 Thanks for reading this article!
If you like what I do and would love to see more related content, follow me on my other social platforms:
Twitter: Blake Yeboah
GitHub: Blake-K-Yeboah
LinkedIn: Blake Yeboah