JavaScript Cookies vs Local Storage vs Session Storage

TL;DR

Learn about the distinctions between cookies, local storage, and session storage, and how to use each method to store data in a browser.

Transcript

hello everybody kyle here from webdev simplified in today's video we're going to be talking about the three main ways to store data inside of a browser which are local storage session storage and cookies we're going to talk about the differences between the three as well as how to use all three of them so let's get started now now before I get star... Read More

Key Insights

• 🍪 All three ways of storing data in a browser - local storage, session storage, and cookies - are stored on the user's browser, making them browser independent and accessible only to the user who saved them.
• 🔒 Local storage and session storage are similar, while cookies are quite different and have been around longer.
• 📊 Cookies have a smaller capacity (4 kilobytes) compared to local storage (10 megabits) and session storage (5 megabits).
• 🌐 Cookies and local storage are available across all tabs in the browser, while session storage is limited to the tab in which it was set. ⌛ Session storage automatically expires when the user closes the tab, while local storage persists until manually deleted or cleared.
• 🗄️ Local storage, session storage, and cookies are all stored in the browser, but cookies are sent to the server with every request, potentially impacting request and response times.
• 🔑 Cookies are especially useful for authentication tasks since they are sent to the server.
• 💻 In practice, local storage and session storage are preferred for storing user information in the browser, unless the data needs to be sent to the server, in which case cookies are necessary.

Questions & Answers

Q: What are the similarities between cookies, local storage, and session storage?

Cookies, local storage, and session storage are all stored within the user's browser and are independent of each other and other browsers. This means that if a user is using Chrome, the stored data would only be accessible in Chrome and not in other browsers or devices. Furthermore, users do not share cookies and local storage between them, so any data stored on a user's computer would not be accessible by other users of the same site.

Q: How much data can each storage method hold?

Cookies have a much smaller capacity compared to local storage and session storage. Most browsers can store up to 4 kilobytes of data in cookies, while local storage can hold up to 10 megabits and session storage can hold up to 5 megabits.

Q: What is the difference between local storage and session storage when it comes to expiration?

Session storage is tied to a specific browsing session and is removed as soon as the user closes the tab or browser window. On the other hand, local storage remains persistent until it is deleted by the user or through code. Session storage is ideal for storing data that should only exist for a single session, while local storage is suitable for data that should persist across multiple sessions.

Q: How are cookies different from local storage and session storage in terms of storage location?

While cookies, local storage, and session storage are all stored within the user's browser, cookies are also sent to the server with every request. This is why cookies have a smaller capacity compared to the other two storage methods because all the information in cookies needs to be sent to the server. Local storage and session storage, on the other hand, remain within the browser and are not sent to the server unless explicitly included in the request.

Q: When should cookies be used instead of local storage or session storage?

Cookies are typically used when there is a need to send the stored information to the server. This makes cookies suitable for performing authentication-related tasks as they can be sent to the server from the browser. However, cookies can slow down the request and response time if they are large in size, so it is recommended to limit the use of cookies unless necessary.

Q: How can data be stored in local storage and session storage using JavaScript?

To store data in local storage or session storage, JavaScript can be used to set an item with a key-value pair. For example, in local storage, the code would be localStorage.setItem('key', 'value'), where 'key' is the identifier and 'value' is the data to be stored. The same principle applies to session storage using sessionStorage.setItem('key', 'value').

Q: Is there a way to view the stored data in cookies, local storage, and session storage?

Yes, it is possible to view the stored data in cookies, local storage, and session storage using browser developer tools. In Google Chrome, for example, the "Application" section in the dev tools allows users to inspect the data stored in different storage methods. However, for cookies, there is no user-friendly interface, and the data is typically viewed as a single string that needs to be parsed. It is recommended to use a small library to handle cookies for easier management.

Summary & Key Takeaways

• Cookies, local storage, and session storage are all stored on the user's browser and are independent of each other and other browsers.

• Cookies have a smaller capacity compared to local storage and session storage and are sent to the server with every request, while the other two are only available within the browser.

• Local storage is persistent and remains until deleted, session storage is only available for the current session, and cookies can have expiration dates set.