HTML Web Storage

What is Web Storage?

Web Storage is a standard browser API designed to save data locally as simple key-value pairs.

It replaces traditional cookies for storing non-sensitive data, offering faster performance, better security, and a much larger storage capacity (up to 5MB).

Example: What is Web Storage?

<script>
  localStorage.setItem('username', 'Alex');
</script>

Persistent Storage with localStorage

The localStorage object saves data persistently on the user's device. This data has no expiration date; it remains saved even when the user closes their tabs, restarts their browser, or shuts down their device.

Example: Persistent Storage with localStorage

<script>
  localStorage.setItem('theme', 'dark');
  console.log(localStorage.getItem('theme'));
</script>

Temporary Storage with sessionStorage

The sessionStorage object works exactly like localStorage, but it is temporary. The data is only saved for the duration of the page session, meaning it is deleted as soon as the user closes their browser tab.

Example: Temporary Storage with sessionStorage

<script>
  sessionStorage.setItem('formProgress', 'step2');
  console.log(sessionStorage.getItem('formProgress'));
</script>

Saving Structured Data using JSON

Web Storage can only store data as simple strings. To save complex data structures (like arrays or objects), you must convert them into a JSON string using JSON.stringify before saving, and parse them back using JSON.parse when retrieving.

Example: Saving Structured Data using JSON

<script>
  const settings = { theme: 'dark', fontSize: 16 };
  localStorage.setItem('settings', JSON.stringify(settings));
  const saved = JSON.parse(localStorage.getItem('settings'));
</script>

Clearing and Managing Storage Space

To keep your storage space organized and stay within browser limits, you should regularly clear out old or unused data. You can delete specific items using removeItem, or clear the entire storage area using the clear method.

Example: Clearing and Managing Storage Space

<script>
  localStorage.removeItem('theme');
  localStorage.clear();
</script>

Storage Limits Per Browser

Most modern browsers allow around 5 to 10 megabytes of storage per origin for both localStorage and sessionStorage, though the exact limit varies slightly between Chrome, Firefox, and Safari.

This is plenty for settings and small cached data, but far too little for storing large files or media.

Example: Storage Limits Per Browser

<script>
  try {
    localStorage.setItem('data', 'x'.repeat(10000000));
  } catch (e) {
    console.log('QuotaExceededError:', e.message);
  }
</script>

Listening for Storage Events

The storage event fires on other open tabs or windows of the same site whenever localStorage changes in one of them, letting you keep multiple tabs in sync.

Notably, this event does not fire in the same tab that made the change, only in other tabs listening to the same origin.

Example: Listening for Storage Events

<script>
  window.addEventListener('storage', function (event) {
    console.log(event.key, event.newValue);
  });
</script>

Cookies vs localStorage

Cookies are automatically sent to the server with every single HTTP request, have a much smaller size limit around 4 kilobytes, and can have an expiration date. localStorage never gets sent to the server automatically, holds far more data, and persists until explicitly cleared, making it much better suited for client-only data like UI preferences.

Example: Cookies vs localStorage

<script>
  document.cookie = "token=abc123";
  localStorage.setItem('uiTheme', 'dark');
</script>