Using browser storage

There are 3 main storage options within the browser. Use the following information to decide which option to use for your use case.

Session Storage

Session storage is a browser storage only accessible through client-side JavaScript in which the data stored is automatically deleted when the user closes the browser tab or window.

Differences

Expiration: On tab close
Storage capacity: 5MB
Accessibility: Current tab

Code example

sessionStorage.setItem("firstName", "John");
sessionStorage.setItem("lastName", "Doe");
sessionStorage.getItem("firstName"); // John
localStorage.removeItem("firstName");

Local Storage

Local storage is a browser storage only accessible through client-side JavaScript in which the data persists in the browser’s memory upon page refresh or window/tab close.

Differences

Expiration: Never
Storage capacity: 10MB
Accessibility: Any window or tab with same origin

Code example

localStroage.setItem("firstName", "John");
localStroage.setItem("lastName", "Doe");
localStorage.getItem("firstName") // John
sessionStorage.removeItem("firstName");

Cookies

Cookies are another form of browser storage only accessible by the server and not by the client-side JavaScript. The data stored in cookies are persistent upon page refresh or window/tab close, until the expired date passes.

Differences

Expiration: Manually set
Storage capacity: 4KB
Accessibility: Any window or tab with same origin

Code example

document.cookie = "firstName=John; expires=${new Date(2025, 0, 1).toUTCString()}"; // 01-01-2025
document.cookie = "lastName=Doe; expires=${new Date(9999, 0, 1).toUTCString()}"; // Never expires
document.cookie // firstName=John; lastName=Doe
document.cookie = "firstName=; expires=Thu, 01 Jan 1970 00:00:00 GMT"

Using browser storage

Comments

More from this blog

Modern React Boilerplate

4 Approaches to hosting SPAs with AWS

Microsoft Azure doesn’t like your IPv6 address

Creating a client-side diagnostics site

Monitoring user interactions with DataDog RUM

Session Storage

Differences

Code example

Local Storage

Differences

Code example

Cookies

Differences

Code example

Command Palette

Comments

More from this blog

Session Storage

Differences

Code example

Local Storage

Differences

Code example

Cookies

Differences

Code example