Testing Storage Limits of localStorage and sessionStorage in Chrome
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. localStorage Capacity Test button { margin-left: 1rem; } #error { color: red; margin-top: 1rem; white-space: pre-wrap; } localStorage Capacity Test Total Usage: 0 KB (0 MB) Add 1MB Clear let index = 0; const oneMB = 'a'.repeat(1024 * 1024); // 1MB string function updateStatus() { let totalChars = 0; for (let i = 0; i { 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(); 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. 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.
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.
lang="en">
charset="UTF-8">
</span>localStorage Capacity Test<span class="nt">
localStorage Capacity Test
Total Usage: id="status">0 KB (0 MB)
id="addButton">Add 1MB
id="clearButton">Clear
id="error">
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.
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.
