Client-side storage is essential to web applications. It may not be as bulletproof as server-side storage but, without it, web apps would be unable to implement many modern features. All kinds of features depend on client-side storage, from sessions in games to shopping carts on e-commerce websites.

Client-side storage also enables web apps to implement a privacy-centric architecture. You can use it to ensure sensitive data never leaves a user's device.

What Is Client-Side Storage?

In web development, client-side storage refers to the various ways web browsers can store data. An application can then use this data to provide functionality to users. Client-side storage is critical for a few reasons:

  • Data stored on the client is significantly faster to access, and your app can access it without the Internet.
  • Client-side storage makes it easier for your application to remember the preferences of each user.
  • Storing some data permanently on the client makes it easier to protect user privacy.
  • Storing all application data on the server is expensive, especially at large scales.

There are several different forms of client-side storage you can use in your web apps.

Cookies

stack of 3 cookies

A browser cookie is a piece of key/value data stored as a string on your computer. Browsers send all cookies for a particular site to the site's server on every request. Cookies were the first (and for a while, the only) type of client-side storage.

There’s no official limit on the size of a cookie, but individual browsers place varying limits on the size and number of cookies you can set. The RFC 6265 Section 6.1 states the following minimum cookie capabilities browsers (user agents) should provide:

Practical user agent implementations have limits on the number and size of cookies that they can store. General-use user agents SHOULD provide each of the following minimum capabilities:

  • At least 4096 bytes per cookie (as measured by the sum of the length of the cookie's name, value, and attributes).
  • At least 50 cookies per domain.
  • At least 3000 cookies total.

Cookies can stay on the browser for varying lengths of time. Some expire at the end of a page session, and some have arbitrary expiration dates that can stretch as far as months into the future.

Browsers create a page session when you open a new tab, and they end it when you close the tab or browser. If you reload or refresh the page, the browser will not end the page session.

Use Cases for Cookies

Cookies are best suited to storing small pieces of data that the server frequently needs to read or modify. Why?

  • Cookies are automatically attached to all network requests
  • Cookies can only store small amounts of string data.

You can use cookies to identify a user (like a session ID), record a page visit for bookmarking purposes, or store a game's high score.

LocalStorage

two empty cardboard boxes

Like a cookie, localStorage is a key/value store that stores string data. While both storage types are similar, localStorage and cookies differ in several ways:

  • LocalStorage depends on JavaScript.
  • Data in localStorage resides primarily on the browser. You have to deliberately send it to the server, instead of the browser sending it on every request.
  • LocalStorage has no expiry date. It persists on the client until a developer deletes it with JavaScript or the user clears their browser storage.
  • LocalStorage has a much greater storage capacity. The WHATWG spec doesn’t specify a hard limit but, according to Wikipedia, the minimum size of localStorage among the major browsers is 5 MB:

Browsers restrict cookies to 4 kilobytes. Web storage provides far greater storage capacity:

  • Opera 10.50+ allows 5 MB
  • Safari 8 allows 5 MB
  • Firefox 34 allows 10 MB
  • Google Chrome allows 10 MB per origin
  • Internet Explorer allows 10 MB per storage area

Use Cases for LocalStorage

LocalStorage is perfect for storing a large amount of data that the server rarely needs to reference. This could be an application's user settings, theme configuration details, or the data in a recently filled form. This is because localStorage has a much larger storage limit than cookies, but you need to go through extra effort to send its data to the server.

If you store the data as JSON, you can store reasonably complex data using localStorage, even though it can only store strings.

LocalStorage is vulnerable to XSS attacks, so you shouldn't store sensitive client data in it.

SessionStorage

SessionStorage is a key/value store that works almost the same as localStorage, except for one thing. The stored data only persists for the length of a page session.

Use Cases for SessionStorage

You can use SessionStorage to store the same type of data as localStorage, but only when the data doesn't need to persist beyond a page session.

IndexedDB

a mining rig

IndexedDB is a powerful browser API for storing large amounts of structured data. It is a transactional, object-oriented database that stores data in key/value pairs.

If you're dealing with smaller amounts of data, localStorage/sessionStorage is the better, easier choice. Unfortunately, they're limited by their storage capacity and the fact that they can only store string data. IndexedDB not only allows storing different types of data including files/binary data, but it can also store much more data. IndexedDB also constructs indexes of its contents to allow for fast searching of the database.

Use Cases for IndexedDB

IndexedDB is essentially a NoSQL database in the browser, and it can store very large amounts of data. Any use case that requires storing over 10 MB of data is appropriate for IndexedDB.

Unlike the other forms of browser storage, IndexedDB isn't limited to storing strings. IndexedDB can store data of all standard JavaScript types. If you build a web application to work primarily offline, you can use IndexedDB to store all the application's data.

Client-Side Storage Is Flexible and Powerful

The term client-side storage refers to storing application data in the browser. Client-side storage is essential to the functioning of most modern web applications. There are various types of client-side storage: cookies, local/sessionStorage, and IndexedDB.

All the types of browser storage have varying limits on their capacity and the type of data they can store. Cookies are the most limited type, local/sessionStorage is the most convenient, and IndexedDB is the most powerful.