Cookies and LocalStorage: the GOATs of Web Development

You close a tab while ordering Chipotle, open it the next day, and your shopping cart is still the same. Your dark mode preference on Colab is exactly how you left it. Websites have a really cool/clever way of doing this. They basically just leave little digital sticky notes that’re inside your browser.

2 of the main tools developers use for this when making websites are Cookies and LocalStorage. They both save data directly on your computer, but they serve different purposes.

Cookies are like authentication badges. A cookie is a tiny piece of data, holding a maximum of just 4kb. When a website gives you a cookie, your browser immediately sends it back to the server every single time you click a link or load a new page. Since the server sees it all the time, cookies are perfect for keeping you logged in (so that they can keep a logged in session going). The server checks your cookie ID, recognizes you, and keeps your session active as you order your Chipotle.

LocalStorage is like an additional preference storage. LocalStorage is a newer tool that has a lot more space you can use, holding around 5mb of data. LocalStorage data stays there. It never travels over the network to the server. It exists only on the front-end, right there in your browser/device. Since it doesn't constantly travel back and forth, it’s usually used for saving site preferences, drafts for forms you are filling out, or your progress on a small web game.

If the backend server needs the information on every single page load, it goes in a cookie. If only the frontend needs the data to customize how you’re browsing, LocalStorage is useful.