DEV Community

Kenji Tomita
Kenji Tomita

Posted on

Testing Storage Limits of localStorage and sessionStorage in Chrome

#html

Introduction

The Web Storage API provides localStorage and sessionStorage as mechanisms for storing data in the browser.
However, both come with storage limitations. In this post, we'll test how much data can be stored before hitting those limits and what kind of errors are thrown, using Google Chrome version 135.

Differences Between localStorage and sessionStorage

Storage Type Lifetime Limit Notes
localStorage Persistent(until cleared) ~5MB Shared across tabs and windows
sessionStorage Until tab is closed ~5MB Valid only within the same tab

These limits are not strictly defined in the specification, and actual limits may vary depending on the browser and device.

Environment

  • Browser: Google Chrome(version 135)
  • Method: Save 1MB strings repeatedly until an error is triggered
  • Language: HTML + JavaScript

Code Example - Add 1MB per Click & Monitor Usage

This example adds 1MB at a time to localStorage, updates usage in real time, and catches errors when the limit is exceeded.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>localStorage Capacity Test</title>
  <style>
    button {
      margin-left: 1rem;
    }
    #error {
      color: red;
      margin-top: 1rem;
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
  <h1>localStorage Capacity Test</h1>
  <p>Total Usage: <span id="status">0 KB (0 MB)</span></p>
  <button id="addButton">Add 1MB</button>
  <button id="clearButton">Clear</button>

  <pre id="error"></pre>

  <script>
    let index = 0;
    const oneMB = 'a'.repeat(1024 * 1024); // 1MB string

    function updateStatus() {
      let totalChars = 0;
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        const value = localStorage.getItem(key);
        totalChars += (key.length + value.length);
      }
      const totalKB = Math.round(totalChars / 1024);
      const totalMB = (totalChars / (1024 * 1024)).toFixed(2);
      document.getElementById('status').textContent = `${totalKB} KB (${totalMB} MB)`;
    }

    document.getElementById('addButton').addEventListener('click', () => {
      const errorElem = document.getElementById('error');
      errorElem.textContent = ''; // Reset

      try {
        localStorage.setItem(`key${index}`, oneMB);
        index++;
        updateStatus();
      } catch (e) {
        console.error(e);
        errorElem.textContent = `Storage limit exceeded!\n\nError Name: ${e.name}\nMessage: ${e.message}`;
      }
    });

    document.getElementById('clearButton').addEventListener('click', () => {
      localStorage.clear();
      index = 0;
      updateStatus();
      document.getElementById('error').textContent = '';
    });

    // Initial display
    updateStatus();
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Result - What Happens When Limit is Reached

When the limit is exceeded in Chrome, this error is thrown:

Storage limit exceeded!

Error Name: QuotaExceededError
Message: Failed to execute 'setItem' on 'Storage': Setting the value of 'key4' exceeded the quota.
Enter fullscreen mode Exit fullscreen mode

The storage is not updated once the quota is reached. The browser throws a QuotaExceededError, indicating that the data cannot be saved.

What About sessionStorage?

I tested the same code using sessionStorage instead of localStorage, and observed a similar result.
When the storage limit was exceeded, a QuotaExceededError was also thrown.

Summary

  • In Chrome(v135), both localStorage and sessionStorage have approximately a 5MB limit.
  • When this limit is reached, a QuotaExceededError is thrown.
  • You can simulate and test this behavior easily using simple JavaScript code.
  • Always make sure to handle potential storage errors gracefully, especially when dealing with large or dynamic data.

Top comments (0)