Cookies vs localStorage

Anum Siddiqui
Sep 23, 2018 · 3 min read

Recently, I was tasked with a question during an interview with a big company. The question was, “Tell me the difference between cookies and localStorage?” And although I had a very broad idea of what the differences might be, I thought I’d dive into this topic a bit more.

Introduction to Cookies

So what are cookies? Well, I can most certainly tell you they’re not what you might find in your snack stash when you’re craving some sugary sweets. In fact, cookies are small files which are located on a user’s computer. They are designed to hold a generous amount of data specific to a client and website, and they can accessed either by the web server or the client computer. The reason behind this is to allow the server to deliver a page tailored to a particular user, or the page itself can contain some script which knows of the data in the cookie, and therefore it is able to carry information from one visit to the website to the next.

So what does a cookie contain? Well each cookie is effectively a small lookup table containing pairs of key, data values. Once the cookie has been read by the code on the server or the client computer, the data can be retrieved and used to customize the web the web page appropriately.

Cookies are pretty much a convenient way to carry information from one session on a website to another, or between sessions on related websites, without having to burden a server machine with massive amounts of data storage. If we were to store data on the server without using cookies, then it would be difficult to retrieve a particular user’s information without requiring a login on each visit to the website. Therefore, a cookie can simply be used if there is a large amount of information to store. In addition a cookie can be made to persist for an arbitrary length of time.

Introduction to localStorage

localStorage is a way to store data on the client’s computer. It allows the saving of key/value pairs in a web browser and it stores data with no expiration date. localStorage can only be accessed via JavaScript, and HTML5. However, the user has the ability to clear the browser data/cache to erase all localStorage data. Web storage can be viewed simplistically as an improvement on cookies, providing much greater storage capacity The available size is 5MB, which is more space to work with than a typical 4KB cookie. In addition with localStorage, the data is not sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc.), which thus reduces the amount of traffic between client and server. Lastly, it works on same-origin policy, so the data stored will only be available on the same origin.

Differences between cookies and localStorage

Cookies and local storage serve different purposes. Cookies are mainly for reading server-side, whereas local storage can only be read by the client-side. Apart from saving data, a big technical difference is the size of data you can store, and as I mentioned earlier localStorage gives you more to work with. In conclusion, the question when dealing with the two, one should ask is, in your application who needs this data- the client or the server?

Data Driven Investor

from confusion to clarity, not insanity

Anum Siddiqui

Written by

New York native Full Stack Web Developer on the hunt for new opportunities and always hungry to learn!

Data Driven Investor

from confusion to clarity, not insanity

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade