Cookies vs Local Storage vs Session Storage

Summary

This video script introduces three distinct methods for data storage in web browsers: cookies, localStorage, and sessionStorage. It explains the purpose of client-side data storage, which is to enhance user experience by reducing load times and avoiding frequent data retrieval from the server. The script compares these storage options, highlighting their similarities and differences in terms of data capacity, persistence, and accessibility across browser tabs and sessions. It also demonstrates how to use JavaScript to manipulate and access these storage types, providing practical insights for web developers.

Takeaways

• 😀 The video introduces three different methods for storing data on a browser: cookies, localStorage, and sessionStorage.
• 🔒 Storing data locally is essential for improving user experience by reducing wait times, as it allows for immediate data retrieval without needing to request it from the server each time.
• 📝 Examples of data suitable for local storage include user login information, product IDs selected by users, and previous session data.
• 🚫 Sensitive data should not be stored locally due to security concerns.
• 🌐 Both localStorage and sessionStorage store data in a key-value pair format, while cookies also have attributes like expiration time and path.
• 💾 localStorage has a storage capacity of 10MB, whereas sessionStorage has 5MB, and cookies are limited to 4KB.
• 🔄 Cookies are unique in that they are automatically sent with every HTTP request to the server, while localStorage and sessionStorage data are not.
• 🕒 sessionStorage is specific to a single session and will be cleared when the tab is closed, whereas localStorage persists indefinitely until manually cleared.
• 🔍 Modern browsers support all three storage methods, but cookies are the only method supported by older browsers.
• 🛠️ The video demonstrates how to use JavaScript to interact with these storage methods, including setting, getting, and removing data.
• 🔑 The video also explains how to view stored data within the browser's developer tools for inspection and debugging.

Q & A

What are the three different ways to store data in a browser as mentioned in the script?

The three different ways to store data in a browser mentioned in the script are cookies, localStorage, and sessionStorage.

Why is it important to store data on the client side in a browser?

Storing data on the client side is important to improve performance by reducing the need to make API requests to the server for data that can be immediately accessed and used, thus reducing wait times for the user.

What types of data should be stored in the browser according to the script?

The script suggests storing data such as user login information, product IDs selected by users, previous working sessions, and user preferences like theme colors, font sizes, and other customizable settings.

What is the main difference between cookies and localStorage/sessionStorage in terms of data transmission?

The main difference is that cookies are sent to the server with every HTTP request, while localStorage and sessionStorage data are not sent to the server and remain on the client side.

What is the maximum storage capacity for cookies, localStorage, and sessionStorage?

Cookies have a maximum storage capacity of 4KB, localStorage can store up to 10MB, and sessionStorage has a capacity of 5MB, although the exact limit can vary by browser.

How do you access data stored in cookies and localStorage from a web page?

Data stored in cookies and localStorage can be accessed from any window or tab of the same origin using JavaScript's `document.cookie` for cookies and the `localStorage` object for localStorage.

How is sessionStorage different from localStorage in terms of data persistence?

SessionStorage data is cleared when the tab is closed, whereas localStorage data persists indefinitely until manually cleared.

What happens to the data stored in sessionStorage when a new tab is opened?

When a new tab is opened, the data stored in sessionStorage for that tab is isolated and not accessible from other tabs. It is created anew and will be cleared when the tab is closed.

How can you set an expiration date for a cookie?

You can set an expiration date for a cookie by adding an 'expires' attribute with a date in GMT format to the cookie's settings when creating or modifying it.

What is the significance of the 'clear' method in the context of localStorage and sessionStorage?

The 'clear' method is used to remove all key-value pairs stored in localStorage or sessionStorage, effectively clearing all data stored in these storage options.

How can you view the data stored in localStorage and sessionStorage using browser developer tools?

You can view the data stored in localStorage and sessionStorage by opening the developer tools in your browser, navigating to the 'Application' tab, and then selecting the 'Storage' section to view the keys and values.