Article Categories

Selected Reading

HTML 5 local Storage size limit for sub domains

HTML Web Development Front End Technology

HTML5's localStorage provides a way to store data locally in the user's browser. However, it comes with size limitations to prevent abuse and ensure browser performance. The standard size limit is typically 5 to 10 MB per origin, with most browsers implementing a 5 MB limit.

Understanding Origins and Subdomains

In web storage context, an origin consists of the protocol, domain, and port. Each origin gets its own separate localStorage space. Importantly, subdomains are treated as separate origins, meaning subdomain1.example.com and subdomain2.example.com each have their own 5 MB storage limit.

Official W3C Specification

The W3C specification includes important guidelines about subdomain storage limits −

User agents should guard against sites storing data under their origin's other
affiliated sites, e.g. storing up to the limit in a1.example.com, a2.example.com,
a3.example.com, etc, circumventing the main example.com storage limit.

For the recommended size limit, the specification states −

A mostly arbitrary limit of five megabytes per origin is suggested.
Implementation feedback is welcome and will be used to update this suggestion
in the future.

How Browsers Handle Subdomain Storage

Most modern browsers treat each subdomain as a separate origin, which means:

www.example.com gets 5 MB
api.example.com gets 5 MB
cdn.example.com gets 5 MB
blog.example.com gets 5 MB

This behavior allows websites to potentially store much more than 5 MB by distributing data across multiple subdomains, though this practice goes against the intended design.

Checking localStorage Usage

Example − Check Current Storage Size

Following example demonstrates how to check the current localStorage usage and available space −

<!DOCTYPE html>
<html>
<head>
   <title>localStorage Size Check</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h2>localStorage Usage Check</h2>
   <button onclick="checkStorage()">Check Storage Usage</button>
   <button onclick="addTestData()">Add Test Data</button>
   <button onclick="clearStorage()">Clear Storage</button>
   <div id="output" style="margin-top: 10px; padding: 10px; background: #f5f5f5;"></div>

   <script>
      function checkStorage() {
         let total = 0;
         for (let key in localStorage) {
            if (localStorage.hasOwnProperty(key)) {
               total += localStorage[key].length + key.length;
            }
         }
         
         document.getElementById('output').innerHTML = 
            `<strong>Current Usage:</strong> ${(total / 1024).toFixed(2)} KB<br>
             <strong>Items Count:</strong> ${localStorage.length}<br>
             <strong>Origin:</strong> ${window.location.origin}`;
      }
      
      function addTestData() {
         let testData = 'x'.repeat(1000); // 1KB of data
         localStorage.setItem('testData_' + Date.now(), testData);
         checkStorage();
      }
      
      function clearStorage() {
         localStorage.clear();
         checkStorage();
      }
   </script>
</body>
</html>

This tool shows current storage usage, item count, and the current origin. Click "Add Test Data" to add 1KB chunks and watch the usage increase.

Testing Storage Limits

Example − Test Storage Capacity

Following example attempts to fill localStorage until it reaches the size limit −

<!DOCTYPE html>
<html>
<head>
   <title>localStorage Capacity Test</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h2>localStorage Capacity Test</h2>
   <button onclick="testCapacity()">Test Maximum Capacity</button>
   <button onclick="clearAll()">Clear All Data</button>
   <div id="result" style="margin-top: 15px; padding: 10px; background: #f9f9f9; border-left: 4px solid #007bff;"></div>

   <script>
      function testCapacity() {
         localStorage.clear();
         let data = 'A'.repeat(1024); // 1KB chunk
         let totalSize = 0;
         let itemCount = 0;
         
         try {
            while (true) {
               localStorage.setItem('test_' + itemCount, data);
               totalSize += data.length + ('test_' + itemCount).length;
               itemCount++;
               
               if (itemCount % 100 === 0) {
                  document.getElementById('result').innerHTML = 
                     `Testing... ${(totalSize / (1024 * 1024)).toFixed(2)} MB stored`;
               }
            }
         } catch (e) {
            document.getElementById('result').innerHTML = 
               `<strong>Storage Limit Reached!</strong><br>
                Maximum size: ${(totalSize / (1024 * 1024)).toFixed(2)} MB<br>
                Items stored: ${itemCount}<br>
                Error: ${e.message}`;
         }
      }
      
      function clearAll() {
         localStorage.clear();
         document.getElementById('result').innerHTML = 'localStorage cleared.';
      }
   </script>
</body>
</html>

Warning: This test fills up localStorage until the browser throws an error. Always clear the data after testing to free up space.

Best Practices for Subdomain Storage

When working with localStorage across subdomains, consider these practices −

Practice	Description
Monitor Usage	Regularly check localStorage usage to avoid hitting limits unexpectedly.
Implement Fallbacks	Have alternative storage strategies when localStorage is full or unavailable.
Data Cleanup	Remove old or unnecessary data to free up space for new content.
Cross-Origin Communication	Use postMessage API to share data between different subdomains when needed.
Avoid Subdomain Abuse	Don't create excessive subdomains just to circumvent storage limits.

Example − Cross-Subdomain Data Sharing

Since localStorage is origin-specific, sharing data between subdomains requires the postMessage API −

// On subdomain1.example.com
window.addEventListener('message', function(event) {
   if (event.origin === 'https://subdomain2.example.com') {
      localStorage.setItem('sharedData', event.data);
   }
});

// On subdomain2.example.com  
let data = localStorage.getItem('myData');
parent.postMessage(data, 'https://subdomain1.example.com');

Browser Variations

Different browsers may implement slightly different size limits −

Chrome/Edge: 5-10 MB per origin
Firefox: 5-10 MB per origin
Safari: 5-10 MB per origin (may ask user permission)
Mobile browsers: Often have smaller limits due to device constraints

The exact limit can vary based on available disk space and browser settings. Some browsers may also allow users to increase or decrease these limits.

Conclusion

HTML5 localStorage has a recommended 5 MB limit per origin, with each subdomain treated as a separate origin. While this allows for potentially larger total storage across multiple subdomains, developers should use this responsibly and implement proper storage management practices. Always monitor usage and provide fallbacks when storage limits are reached.

Sreemaha

Updated on: 2026-03-16T21:38:53+05:30

710 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next