Cookies vs. LocalStorage: What’s the difference?

Faith Chikwekwe
The Startup
Published in
5 min readNov 13, 2018
Cookies — Photo by rawpixel on Unsplash

For a long time, cookies were the main way to store information about users visiting your app or website. They were used to record stateful elements like shopping cart items or options changed by a user. They were also used to remember user browsing habits or to keep a user logged in while they went from page to page. Then, HTML5 appeared on the scene and introduced LocalStorage as another data storage option. This new Javascript object (along with SessionStorage) boasted a much large storage capacity than cookies at a whopping 5MB. In this article, we will compare and contrast cookies and LocalStorage.

Cookies — Small, but Mighty
First, we’ll start by exploring basic information about cookies. We’ll also go over some of their pros and cons. So, what are cookies? According to whatarecookies.com, they are small text files that are placed on a user’s computer by a website. They hold a very small amount of data at a maximum capacity of 4KB. Cookies are used in different ways, such as in storing the pages visited on a site or a user’s login information. They are limited in that they can only store strings.

Many secure websites employ cookies to validate their users’ identities after they’ve logged in to prevent them from having to re-enter their credentials on every page. Another use for cookies is to customize or adjust user experience based on limited browsing history on the site.

Two Types of Cookies — Photo by Oliya Nadya on Unsplash

Two Types of Cookies
There are two types of cookies: persistent cookies and session cookies. Session cookies do not contain an expiration date. Instead, they are stored only as long as the browser or tab is open. As soon as the browser is closed, they are permanently lost. This type of cookie might be used to store a banking user’s credentials while they are navigating within their bank’s website since their information would be forgotten as soon as the tab is closed.

Persistent cookies do have an expiration date. These cookies are stored on the user’s disk until the expiration date and then permanently deleted. They can be used for other activities such as recording a user’s habits while on a particular website in order to customize their experience every time they visit.

Macbook — Photo by rawpixel on Unsplash

LocalStorage — A More Permanent Solution
After HTML5 came out, many uses of cookies were replaced by the use of LocalStorage. This is because LocalStorage has a lot of advantages over cookies. One of the most important differences is that unlike with cookies, data does not have to be sent back and forth with every HTTP request. This reduces the overall traffic between the client and the server and the amount of wasted bandwidth. This is because data is stored on the user’s local disk and is not destroyed or cleared by the loss of an internet connection. Also, as mentioned before, LocalStorage can hold up to 5MB of information. This is a whole lot more than the 4KB that cookies hold.

LocalStorage behaves more like persistent cookies in terms of expiration. Data is not automatically destroyed unless it is cleared through Javascript code. This can be good for larger bits of data that need to be stored for longer periods of time. Also, with LocalStorage you can not only store strings but also Javascript primitives and objects.

People visiting a website — Photo by John Schnobrich on Unsplash

Uses of LocalStorage
In my back-end web development course, we discussed cases where LocalStorage would be superior to cookies. An example of a good use of LocalStorage might be in an application used in regions without a persistent internet connection. My course instructor, Dani Roxberry, built such an application in the past and used LocalStorage to protect and store data collected in areas with spotty WiFi or data connections.

In order for this to be a good use of LocalStorage, the threat level of the data stored in this situation would have to be very low. To protect client privacy, it would be good to upload the data when connection is re-established and then delete the locally stored version. Additionally, it would be advantageous to encrypt data that was being stored so that it would not be easily hacked. In our class discussion, we also established that highly vulnerable data, such as financial information, could not be stored or secured properly using LocalStorage in this way.

Conclusion
While these storage options have their positives and negatives, they both have applications in modern web development. Cookies are smaller and send server information back with every HTTP request, while LocalStorage is larger and can hold information on the client side.

When you make your next application, think about these various uses and decide which type of storage is right for you.

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by +390,426 people.

Subscribe to receive our top stories here.

--

--

The Startup
The Startup

Published in The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +772K followers.

Faith Chikwekwe
Faith Chikwekwe

Written by Faith Chikwekwe

Software Engineer. Currently in the language development space. Passionate about well-documented code and open source.

Responses (16)