Where is data stored in the browser?

We use browsers all the time, and every time we visit a web page, that domain keeps some data on our browsers. There are 4 main places available in the browsers where the data resides. In this video, you will learn about cookies, session storage, local storage, and IndexedDB

Full Transcript

00:00 Hello there. Today you will learn where the data is stored in the browser. So there are four places where the data is stored on the client or the browser. The first place is known as cookies. This is the oldest of all the storage mechanisms available in the browser. The other one is known as session storage. This storage is also a short-term storage because once the tab is closed, the data associated with that domain is removed. The other storage mechanism is known as local storage. The local storage offers durability to the data storage where the data remains persisted even when the browser window is closed. And finally we have IndexedDB, which has full blown database capabilities. It offers storage of objects, indexing, transactions, and many more things that you expect from a database. This session storage and local storage are collectively known as Web Storage API.

00:54 Let's look at these different data stores in the browser now. I will open up youtube.com in Chrome browser. Once opened, I will open up the Chrome dev tools. Next, I will click on the application tab. Here you will find the entire section dedicated to the storage. We will first click on the cookies and see that youtube.com domain is listed under it. Once you click on the domain, you can see all the cookies used by youtube.com on the right hand side. Next I will click on the session storage. Here also we can see the youtube.com inside the session storage and we can confirm that the short term storage has been added by youtube.com by clicking on it. We can follow this approach to find the data stored by YouTube under local storage as well. And finally we can see what all data is stored by YouTube in IndexedDB.

01:44 Here YouTube has named his database as swpushnotificationsdb. And when you click on the DB you can see the object store called as swpushnotificationstore. Once I click on the store we can see the key value pairs of the data, where keys are strings and values are objects. Great! So you now know how you can find what all data is stored by a domain using Chrome Dev tools. And that's it. If you work with JavaScript or any other 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 will 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.