Day 30 of 30 of JavaScript
Tags: webdev, javascript, beginners, tutorial
Published: 2024-07-15 07:15:55

Hey reader👋 Hope you are doing well😊
First of all I would like to congratulate you as you have made it to this post🎉. This is the last blog of our JavaScript tutorial🥳.
In the last post we have talked about JSON. In this post we are going to discuss about some important concepts.
So let's get started🔥

## JS Web APIs

APIs, or Application Programming Interfaces, are sets of rules and protocols that allow software applications to communicate with each other. Web APIs specifically refer to APIs provided by web browsers that enable developers to interact with and manipulate web pages and browsers.
JavaScript Web APIs are interfaces that allow developers to leverage built-in browser capabilities using JavaScript. These APIs can perform a variety of tasks such as manipulating the DOM (Document Object Model), fetching data from a server, storing data locally, and more.
We can also use third party APIs just by downloading the code from web.

Some commonly used JavaScript Web APIs are -:

**- DOM (Document Object Model) API**

The DOM API is perhaps the most fundamental web API for web developers. It allows you to interact with and manipulate the structure of web documents. You can add, remove, and modify elements and attributes using methods like `getElementById`, `querySelector`, `appendChild`, and `removeChild`.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2tlcjzvptrbyblcs92x.png)

**- Fetch API**

The Fetch API is a modern alternative to XMLHttpRequest for making network requests. It allows you to make HTTP requests to servers, handle responses, and process data asynchronously.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8o9jc5kyv7fxpa7hamm2.png)
Here `fetch` is used for fetching data from API it returns a promise if the promise is resolved a response is generated otherwise error is thrown.

**- Local Storage API**

The Local Storage API allows you to store data locally within the user's browser. This data persists even after the browser is closed, making it useful for saving user preferences, caching, and more.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9il5n33ebvci184j5ac.png)

**- Geolocation API**

The Geolocation API provides a way to retrieve the geographical location of the user's device. It's commonly used in location-based services and applications.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxidg2yqs3szu4u5jdbk.png)

There are many APIs that provide important functionalities. You can read more about it from here 👉[https://developer.mozilla.org/en-US/docs/Web/API](url)

## JavaScript Cookies

**What are Cookies?**
Cookies are data, stored in small text files, on your computer.
When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user.
Cookies were invented to solve the problem "how to remember information about the user".
When a user visits a web page, his/her name can be stored in a cookie.
Next time the user visits the page, the cookie "remembers" his/her name.
When a browser requests a web page from a server, cookies belonging to the page are added to the request. This way the server gets the necessary data to "remember" information about users.

**Create Cookies in JavaScript**

- Step 1 Setting a Cookie-: To set a cookie, you assign a string to `document.cookie`. The string should be in the format `name=value;` followed by optional attributes like `expires`, `path`, `domain`, and `secure`.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pe11sv1a2165binpxtv.png)
`username=JohnDoe` sets the cookie name to username and its value to JohnDoe. `expires=Fri, 31 Dec 2024 23:59:59 GMT` sets the expiration date of the cookie. `path=/` makes the cookie available within the entire domain.

- Step 2 Getting a Cookie-: To get a cookie, you can use JavaScript to parse the `document.cookie` string, which contains all the cookies for the current document.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6bysx75bwsvs6dimdn3.png)
So here we are searching for a cookie belonging to particular user if we find the cookie in the cookies array then we return the parsed data otherwise null is returned.

**Deleting Cookies in JavaScript**
To delete a cookie, you set its expiration date to a past date. This effectively removes the cookie.

This is how you can use Cookies in JavaScript.

So this was last blog of JavaScript series. I hope you have found it helpful. The upcoming series will be of NodeJs so please stay connected and follow me.
Thankyou 🤍