Local storage vs Session storage vs Cookies

There are several ways to store data on the client side, primarily local storage, session storage, and cookies. Let’s examine the key differences between them.

Local Storage: If you need to store a substantial amount of data and want it to persist across browser sessions and tabs, local storage is the best option for you. This means that users can access the data in local storage across all windows and tabs from the same origin. In addition, local storage provides a relatively large storage capacity (typically 5–10MB). In many cases, local storage is used for storing user preferences or cached data. As a developer, you can interact with local storage through the JavaScript API (localStorage), which provides a key-value storage mechanism.

Cookies: If you don’t require a large storage capacity and wish to set an expiration time to the data, cookies are the best option for you. There are two types of cookie: one is persistent cookies (which have no expiration date but remain only until the browser is closed), and the other one is session cookies(which have an expiration date and are removed after that date). Cookies are automatically included in HTTP requests making them useful for storing user authentication tokens or credentials. However, it’s important to note that the automatic inclusion of cookies in requests can pose security issues, such as XSS (Cross-Site Scripting) attacks, since the server can also access them. Additionally, this automatic inclusion causes more data traffic.

Session Storage: If you want to restrict the use of data to a specific tab or window, session storage is the best option for you. It offers a storage capacity similar to local storage but is only accessible for the duration of the page session.