Why Browsers use Cookies?

Cookies are one of the oldest mechanisms of storing the data on the client-side, or browser. But why do they exist in the first place? What problem do they solve?

In this video, you will exactly know the reason along with the hands-on demo using the Chrome Developer Tools

Full Transcript

00:00 Hello there. Today you will learn why cookies are used by the browsers. The browsers use a protocol known as HTTP, also known as hypertext transfer protocol. The HTTP protocol is a stateless protocol, which means the request does not contain any unique information about the requester. This way, given a request, the server has no way of knowing whether or not the request is coming from the same computer. The cookies help to solve this problem. The cookies solve this problem for the servers. So when the request comes to the server, it sets a cookie in the HTTP response header and sends it back to the client. The client, in the subsequent request, sends the cookie to the server. That's how server solves the problem of knowing who the sender is. Let's see that in action. I have opened up the Chrome browser and not loaded any URL yet.

00:53 I will open up the Chrome developer tools and click on the Network tab. Since we have not loaded any URL, there is no activity that we see here. Now, I will load the URL google.com and as the page loads you can see the activity in the network tab. Next I will click onto google.com row with 302 response status since it is the one which sent the page back to us. This opens up a panel on the right and you can look at the cookies tab as the last tab here. Once clicked, you can see that the only cookies available here are the response cookies, which means server sent the cookies back to us. The browser requested the page for the very first time and had no cookies to send to the server. We can look at the applications tab and confirm that the cookies are available in the cookie storage.

01:41 It also seems that while loading resources, more cookies were sent by the server. Now we will go back to the network tab and refresh the page. Once the page is loaded, I will click on the first row, which has 200 response status and the document type. It opens up the panel as before, but this time in the cookies tab you can see two sections, the request cookies and the response cookies. Since the cookies were available from the previous session, when we refreshed the page, the browser sent the cookies for google.com to the Google servers and in response, Google returned two cookies with updated values for 1P_jar and NID. So now you know how cookies help to identify the computers and how you can find that out yourself using Chrome dev tools. And that's it. If you work with JavaScript or any of the frameworks such as the jQuery, angular or react, you have executed JavaScript on the browser. So the new course that we have launched is relevant for you. It's called Browser JavaScript and event loop. This course educates on how JavaScript is executed behind the scenes and we'll cover various topics such as ExecutionContext and event loop. You will have the opportunity to visually see every step of JavaScript code execution. Check out the course link in the description below to learn more about the course and let us know if you have any questions. Keep learning and see you next time.