5 Useful web APIs

5 Useful web APIs

Enhancing Web Functionality with Essential Browser APIs,

·

2 min read

1.ClipBoard API

This API provides access to the operating system's clipboard. You can use it to build a copy button to copy/paste content

const writeToClipBoard = async()=>
{
    try{
        await navigator.clipboard.writeText(userText);
        console.log("Text copied to the clipboard")
    }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

It lets you store data against the website address in the form of key/value pairs .Local storage is limited to 5MB

// save data in local storage 
localStorage.setItem('key', '');
// get data from local storage 
localStorage.getItem('key');
// remove data from local storage 
localStorage.removeItem('key');

3.Geolocation API

This API provide the user's geographical latitudes and longitudes and the accuracy to which it is correct.

onst getCurrentLocation =()=>[
    navigator.geolocation.getCurrentPosition(
        position=>{
            const coord = position.coords;
            console.log(coord.accuracy);
            console.log(coord.latitude);
            console.log(coord.longitude);
        },
        err=>{
            console.log(`Error:${error.message}`);

        },
        {
            enableHighAccuracy:true,
            timeout:5000,
            maximumAge:0
        }
    )
]

4.History API

This API lets you go back and forth between web pages that are in your session history.

//go back in history
window.history.back();

//go forward in history
window.history.forward();

Fetch API

It is a browser API that lets you call REST APIs or GraphQL APIs


async function callAPI(){
    try {
        const res = await fetch(`API URL`,{
            method:'',
            headers:{},
            body:{}
        }
        );
        const data = await res.json();
        return data;
    } catch (error) {
        console.log(err)
    }
}