💾 Browser Storage

Cookies

Cookies have been around since the earliest days of the web to help store simple client-side data. Cookies are still used in modern-day web development for storing data such as sessions and access tokens. You don't need to use cookies though, we can use the newer web storage features via the Web Storage API. The Web Storage API claims to be easier and more intuitive to use for storing simple key values pairs.

When visiting a website using cookies, you should be prompted to accept or reject the various cookies with different intentions. Some cookies are needed for site functionality, others are just optional and may be used to capture data for marketing or analytical purposes. You can also delete cookies stored in your browser via JavaScript, browser dev tools, or just through the history settings UI.

Cookies have an individual maximum storage capacity of 4096 bytes. Each browser has a different max capacity for the number of cookies you can store. Chrome sits at 180 cookies, Firefox 150, and Android 50. Hopefully, you don't ever need to set anywhere near that capacity...

Cookies can be set by a responding server request using the Set-Cookie HTTP header, or via client-side JavaScript using the document.cookie property.

The document.cookie property acts as both a getter and setter.

1const getCookie = (name: string): string => document.cookie
2  .split('; ')
3  .find(cookie => cookie.startsWith(name))
4
5getCookie('the-joe-codes')
6
7// outputs: 'the-joe-codes=123'

1document.cookie="the-joe-codes=123"
2document.cookie="another-cookie=🍪"
3
4allCookies = document.cookie;
5
6// outputs: 'the-joe-codes=123; another-cookie=🍪;'

1document.cookie="the-joe-codes=123; expires=Thu, 01 Jan 2023 00:00:00 UTC;"

1document.cookie="the-joe-codes=; expires=Thu, 01 Jan 1970 00:00:00 UTC;"

Web Storage API

Session Storage

sessionStorage can hold data for the users' page session across each origin visited. Session storage is persisted across page reloads and browser tab restores. When the page session is killed (tab closed or browser closed), so is the session storage.

Session storage can hold up to 5MB of data, which is more than an individual cookie (4096 bytes).

Setting Session Storage

To set a session storage key value pair:

1sessionStorage.setItem('thejoecodes', '123');

Getting Session Storage

To get a session storage object by key:

1const sessionStorageItem = sessionStorage.getItem('thejoecodes');
2// 123

To see all session storage for a page:

1// set
2sessionStorage.setItem('thejoecodes', '123');
3
4// get all
5myStorage = window.sessionStorage;
6
7// logs object with Storage prototype: 
8// {thejoecodes: '123', length: 1}

Deleting Session Storage

To delete a session storage object by key:

1sessionStorage.removeItem('thejoecodes');

To delete all session data stored for a page:

1sessionStorage.clear();

Local Storage

localStorage is similar to session storage. The key difference is persistence: local storage survives page reloads, tab restores, and the browser being closed and reopened. Like session storage, it is scoped to the same origin, so data stored on one domain is not accessible from another.

Local storage can hold up to 5MB of data, which is more than an individual cookie (4096 bytes).

Setting Local Storage

To set a local storage key value pair:

1localStorage.setItem('thejoecodes', '123');

Getting Local Storage

To get a local storage object by key:

1const localStorageItem = localStorage.getItem('thejoecodes');
2// 123

Getting All Local Storage

To see all local storage for a page:

1// set
2localStorage.setItem('thejoecodes', '123');
3
4// get all
5myStorage = window.localStorage;
6
7// logs object with Storage prototype: 
8// {thejoecodes: '123', length: 1}

Deleting Local Storage

To delete a local storage object by key:

1localStorage.removeItem('thejoecodes');

Deleting All Local Storage

To delete all local data stored for a page:

1localStorage.clear();

Window Storage Event

This event fires when localStorage or sessionStorage has been modified.

1window.addEventListener('storage', () => {
2  console.log(JSON.parse(window.localStorage.getItem('thejoecodes')));
3});
4
5window.onstorage = () => {
6  console.log(JSON.parse(window.localStorage.getItem('thejoecodes')));
7};