Asif's blog

30 Days of JAVASCRIPT #16/30

Shaik Asif's photo
Shaik Asif
·

3 min read

Browser APIs in JS..

Browser APIs are built into web browsers and provide native features that can be used in web applications. In this blog post, we will discuss four browser APIs: Local Storage, Web Storage, Geolocation API, and Canvas API.

Local Storage

Local Storage is a form of web storage that allows developers to store and retrieve data in the browser. The data stored in Local Storage will not expire, which means it will persist even if the tab or the browser window is closed. Local Storage is a part of the Web Storage API, which provides mechanisms by which browsers can store key/value pairs in a much more intuitive fashion than using cookies.Here is an example code that demonstrates the use of Local Storage:

// Storing data in Local Storage
localStorage.setItem("name", "John");

// Retrieving data from Local Storage
const name = localStorage.getItem("name");
console.log(name); // Output: John

// Removing data from Local Storage
localStorage.removeItem("name");

In the above code, we use the setItem(), getItem(), and removeItem() methods to store, retrieve, and remove data from Local Storage, respectively.

Web Storage

Web Storage is a part of the Web Storage API that provides mechanisms by which browsers can store key/value pairs in a much more intuitive fashion than using cookies. Web Storage has two mechanisms: sessionStorage and localStorage. sessionStorage keeps data for the duration of the session, while localStorage retains the data even after the browser is closed.Here is an example code that demonstrates the use of Web Storage:

// Storing data in Web Storage
sessionStorage.setItem("name", "John");
localStorage.setItem("age", 30);

// Retrieving data from Web Storage
const name = sessionStorage.getItem("name");
const age = localStorage.getItem("age");
console.log(name); // Output: John
console.log(age); // Output: 30

// Removing data from Web Storage
sessionStorage.removeItem("name");
localStorage.removeItem("age");

In the above code, we use the setItem(), getItem(), and removeItem() methods to store, retrieve, and remove data from Web Storage, respectively.

Geolocation API

The Geolocation API provides a way to get the geographical position of a user. It takes advantage of the device’s capability to pinpoint the user’s location that can then be used in the web application.Here is an example code that demonstrates the use of the Geolocation API:

// Getting the user's location
navigator.geolocation.getCurrentPosition(position => {
  console.log(position.coords.latitude, position.coords.longitude);
});

In the above code, we use the getCurrentPosition() method to get the user's location. The method takes a callback function that is called with a Position object that contains the latitude and longitude of the user's location.

Canvas API

The Canvas API provides a way to draw graphics using JavaScript and HTML. Different shapes, objects, and styles can be created using this API. The Canvas API is solely based on 2D graphics, currently.Here is an example code that demonstrates the use of the Canvas API:

// Drawing a rectangle on a canvas
const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

In the above code, we use the getContext() method to get a 2D rendering context for the canvas. We then use the fillStyle and fillRect() methods to draw a red rectangle on the canvas.

Conclusion

Browser APIs provide native features that can be used in web applications. Local Storage and Web Storage provide mechanisms by which browsers can store key/value pairs in a much more intuitive fashion than using cookies. The Geolocation API provides a way to get the geographical position of a user. The Canvas API provides a way to draw graphics using JavaScript and HTML. By understanding and using these APIs, developers can create dynamic and interactive web applications.

JavaScript