Cookie, Local Storage, Session Storage

—

The browser (client-side) storage consists of JavaScript APIs that allow us to store data on the user's machine. The main reason to use browser storage is performance: the data stored locally is instantaneously available. The data stored remotely, on a server, may take some time, because we need a send a request to the server, to access the data, to get the data, and to send them back to the client. It's a roundtrip from client to server to client. And we can't go faster than the speed of light! Imagine if the server is located far from the user's device, in another country or another continent! So browser storage is mostly made to avoid these round trips.
Often client-side and server-side storage are used together. At first visit, data are fully requested to the server, and some of them are kept on the client side, so we don't need to request them again to the server. The more data you have available on the browser, the quicker loads the page.

What can be interesting to store locally:

  • The user's site preferences: choices on custom widgets, color scheme.
  • The user's site activities: items added or removed to a shopping cart from a previous session.
  • Login state: remember if a user is logged in.
  • Data and assets: images, music files.

To store data on the client, we can use cookie, loscalStorage or sessionStorage. To decide which method is best to use, we consider these parameters: storage limit, accessibility, and expiration.

  • Storage limit: 4 kilobytes
  • Accessibility: accessible from any window or tab, and/or on the server.
  • Expiration: no expiration, we need to eliminate manually.

Local Storage

  • Storage: up to 10 megabytes.
  • Accessibility: accessible from any window or tab.
  • Expiration: no expiration, we need to eliminate manually.

Pros: the data stored in it has no expiration date, the storage limit is about 10 MB, and its data is never transferred to the server.
Cons: its data is plain text so it is not secure by design, the data type is limited to string so it needs to be serialized, and the data can only be read on the client-side, and not on the server-side.

Save data to localStorage
localStorage.setItem("key", "value");
Get saved data from localStorage
let data = localStorage.getItem("key");
Remove saved data from localStorage
localStorage.removeItem("key");
Remove all saved data from localStorage
localStorage.clear();

Session Storage

  • Storage: up to 5 megabytes.
  • Accessibility: no access from another tab in the browser.
  • Expiration: data cleared when the tab is closed.

Good to know: when you open a tab in the browser, a unique page session gets created and assigned to this particular tab, which lasts as long as the tab or the browser is open, and survives over page reloads and restores. When you close the tab, the session ends, which means the data stored in this sessionStorage is cleared. If you open a new tab/window with the same URL, it creates a new session with the value of the top-level browsing context, which means that it will copy the tab's sessionStorage into this new tab, and create a sessionStorage for this new tab/window. And when you close this tab/window, it ends the session and clears objects in sessionStorage.

Save data to sessionStorage
sessionStorage.setItem("key", "value");
Get saved data from sessionStorage
let data = sessionStorage.getItem("key");
Remove saved data from sessionStorage
sessionStorage.removeItem("key");
Remove all saved data from sessionStorage
sessionStorage.clear();

Resources