Notes on browser storage

Modern browsers support about 10 different types of storage. Let's take a look at few of them.

(1) Cookies

Cookies have a size limit of 4KB. They are generally used to store data that needs to be sent to the server. Cookies are sent to the server with every request as a part of the HTTP request header.

You can view the cookies for a website using the browser's developer tools -> Application tab -> Cookies.

You can set the expiry date for the cookie using the expires or Max-Age attributes. Servers can set cookies with the Set-Cookie header. Cookies are domain specific and can be set to be accessible only to the domain they were set on.

Cookies can be marked as HttpOnly which prevents them from being accessed by JavaScript. This is useful for preventing cross-site scripting attacks.

Cookies can only store strings. If you want to store other data types, you need to serialize them to a string.

A modern native way of accessing cookies is via the Cookie Store API which is only available on HTTPS pages.

// Set a cookie. More options are available too.
cookieStore.set('auth_token', 'abc123def');

// Async method to access a single cookie and do something with it.
cookieStore.get('auth_token').then(...);

// Async method to get all cookies.
cookieStore.getAll().then(...);

// Async method to delete a single cookie.
cookieStore.delete('auth_token').then(() =>
  console.log('Cookie deleted')
);

// Set a cookie. More options are available too.
cookieStore.set('auth_token', 'abc123def');

// Async method to access a single cookie and do something with it.
cookieStore.get('auth_token').then(...);

// Async method to get all cookies.
cookieStore.getAll().then(...);

// Async method to delete a single cookie.
cookieStore.delete('auth_token').then(() =>
  console.log('Cookie deleted')
);

(2) Session storage

Session storage is used to store the data for the duration of page session. You can store upto 5MB of data in session storage. Session storage is not accessible from other windows or tabs. Session storage is not sent to the server with every request. All JS on current page can access the data in session storage.

You can access session storage in developer tools -> Application tab -> Storage -> Session storage.

// Set a value in sessionStorage.
sessionStorage.setItem('key', 'value');

// Get a value from sessionStorage.
console.log(sessionStorage.getItem('key'));

// Remove a value from sessionStorage.
sessionStorage.removeItem('key');

// Clear all data in sessionStorage.
sessionStorage.clear();

// Set a value in sessionStorage.
sessionStorage.setItem('key', 'value');

// Get a value from sessionStorage.
console.log(sessionStorage.getItem('key'));

// Remove a value from sessionStorage.
sessionStorage.removeItem('key');

// Clear all data in sessionStorage.
sessionStorage.clear();

(3) Local storage

Local storage enables you to store data for an indefinite period of time. You can store upto 5MB of data in local storage. Local storage is accessible from other tabs and windows of the same origin. All JS on current page can access the data in local storage.

// Set a value in localStorage.
localStorage.setItem('key', 'value');

// Get a value from localStorage.
console.log(localStorage.getItem('key'));

// Remove a value from localStorage.
localStorage.removeItem('key');

// Clear all data in localStorage.
localStorage.clear();

// Set a value in localStorage.
localStorage.setItem('key', 'value');

// Get a value from localStorage.
console.log(localStorage.getItem('key'));

// Remove a value from localStorage.
localStorage.removeItem('key');

// Clear all data in localStorage.
localStorage.clear();

(4) IndexedDB

If you want to store significant amounts of structured data, you can use IndexedDB. IndexedDB is a NoSQL database. It is a transactional database system, similar to SQL databases.

Each DB is unique to the origin.

(5) Extension storage

• Provides a way for browser extensions to persist user data and state.
• Different areas like storage.local (data local to each machine), storage.sync (data synced across user's Chrome browsers), and storage.session (in-memory data for the duration of a browser session) are available.
• More robust for extension data than using Web Storage APIs because it persists even if the user clears browsing history.