Local storage and cookies are two of the ways you can store data on the browser, but are they both different? If there is no difference, why there are two options? If they are different, what differentiates them? In this blog, let's have a look at both local storage and cookies. What are they? Why and when should you use them? the risks and advantages they bring to the table.

Cookies.

Cookies, as the name suggests are sweet 😂. Cookies are one of the ways you can store data in the browser. The main advantage of cookies is that they are accessible both client-side and server-side. The best and worst part about cookies is that they are passed through the headers on each API call to the server. It's best as we don't need to manually pass the content in the headers, and the worst part is that it can reduce the speed if you send the data to the server, which you expect to use only on the client side.

As our edible cookies have an expiry period, the browser cookies also have an expiry date, limiting the usage to a certain period, and can be cleared through code or by manually deleting the cookies from browser settings.

When should I use cookies?

As we now know, with cookies, we get the advantage of automatic communication with the server through headers. Whenever the need to store data is only on the server side, we use cookies. However, the browser never complains if you use them to store client-side data too, but this can reduce the API speed drastically sometimes, especially while using devices on mobile data.

Cookies are commonly used to store access tokens, cart information, and personalized information to deliver user-specific ads, specific themes and track user behavior to deliver better experiences.

One of the major disadvantages of cookies is that their size limit is just 4 KB across multiple browsers, and cookies can only store data as strings, making it difficult to parse data sometimes.

What's the risk of using cookies?

As discussed, one of the risks of cookies, if used only to store client-side data, can lead to slower network calls. Another important and unpopular risk of cookies is that you can access the cookie's data through an HTML iFrame if it is not secured. The cookie data is usually accessed through the same domain or its subdomains. But, when embedded with an iframe, the cookies of the child URL that is inside the iframe can be accessed through the parent. So, whenever you are storing information in cookies, make sure you handle the support of iframes effectively.

Local Storage.

As the name suggests, local storage is restricted to the client's local environment, and the server has no idea about it. However, you can access the data from local storage on the client side and manually pass it to the server, but this yields a new operation and less speed on the network calls. So, the best use case for storing data on local storage is to serve data only to the client side.

One of the major advantages of local storage is that there is no expiration date. If you wish to clear local storage, you should either do it through code or clear it manually through browser settings. With local storage, the size limitation of cookies can also be reduced. Browsers offer 5MB of local storage, making it enough to store client-side data.

When should I use local storage?

You can use local storage at any point where you need the data to be served to the client. Usually, developers use local storage to store user preferences, such as theme choices, language settings, or other customizations that enhance the user experience.

Local storage is useful for caching data that is frequently used, reducing the need to make repeated network requests. When developing progressive web apps (PWAs) or other web applications that need to work offline, local storage can be used to store essential data and resources that can be accessed without an internet connection.

What's the risk of using local storage?

Local storage is accessible to JavaScript running on the same domain. However, storing sensitive information is not safe, as it can be accessed or manipulated by scripts on the same domain. Data in local storage exists even after the user closes the browser. Failing to clean up data from time to time can exceed the size limit.

Conclusion.

By understanding both cookies and local storage, you can now make a better decision on what to use based on the conditions. There are a wide range of options out there. However, making the best choice can improve the overall look and speed of your applications.