# 30 Days of JAVASCRIPT #16/30

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](http://cookies.Here) is an example code that demonstrates the use of Local Storage:

```javascript
// 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](http://closed.Here) is an example code that demonstrates the use of Web Storage:

```javascript
// 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](http://application.Here) is an example code that demonstrates the use of the Geolocation API:

```javascript
// 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](http://currently.Here) is an example code that demonstrates the use of the Canvas API:

```javascript
// 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.