❮ Previous Next ❯

Storage Limitations

  • Explore limitations and constraints of browser storage systems.

  • Introduction to Storage Limitations

    Modern web applications rely heavily on browser storage to store:

    • User preferences

    • Login state

    • Tokens

    • Cached data

    • Offline data

    However, browser storage is not unlimited.

    Every storage mechanism comes with:

    • Size limits

    • Browser-specific rules

    • Security restrictions

    • Compatibility concerns

    Understanding these limitations helps developers:

    • Avoid storage errors

    • Prevent data loss

    • Build reliable applications

    • Handle cross-browser issues

    In this lesson, we focus on:

    1. Storage Size Limits

    2. Browser Compatibility

    Storage Size Limits

    Why Storage Limits Exist

    Browsers impose storage limits to:

    • Prevent misuse of system resources

    • Avoid security risks

    • Protect user privacy

    • Ensure fair usage across websites

    Common Browser Storage Types and Their Limits

    localStorage

    localStorage stores data as key-value pairs and persists even after the browser is closed.

    Storage Size Limit

    • Approximately 5 MB per origin (domain)

    This limit may vary slightly depending on the browser.

    Example

    localStorage.setItem("username", "Rahul");

    sessionStorage

    sessionStorage works like localStorage but data is cleared when the browser tab is closed.

    Storage Size Limit

    • Approximately 5 MB per tab

    Each tab has its own storage.

    Example

    sessionStorage.setItem("sessionId", "ABC123");

    Cookies

    Cookies store small pieces of data and are sent to the server with every request.

    Storage Size Limit

    • Around 4 KB per cookie

    • Maximum 20–50 cookies per domain (browser dependent)

    Limitation

    • Very small size

    • Affects network performance

    IndexedDB

    IndexedDB is designed for large, structured data.

    Storage Size Limit

    • Much larger than localStorage

    • Can range from 50 MB to hundreds of MB

    • Depends on browser and user permissions

    Used for:

    • Offline applications

    • Large datasets

    • Progressive Web Apps (PWAs)

  • Storage Size Comparison Table

    Storage Type

    Approx Size Limit

    Persistence

    Use Case

    Cookies

    ~4 KB

    Depends

    Server communication

    sessionStorage

    ~5 MB

    Tab-based

    Temporary session data

    localStorage

    ~5 MB

    Persistent

    User preferences

    IndexedDB

    Large

    Persistent

    Offline & large data

    What Happens When Storage Limit Is Exceeded ?

    When storage exceeds limits:

    • QuotaExceededError is thrown

    • Data may fail to save

    • Application may break silently

Storage Error Handling Example

Uses try-catch to handle errors when storage limit is exceeded. 

try {
  localStorage.setItem("data", largeData);
} catch (e) {
  console.log("Storage limit exceeded");
}

  • Best Practices for Managing Storage Size

    • Store only required data

    • Remove unused keys

    • Compress data when possible

    • Avoid storing large JSON objects in localStorage

    • Prefer IndexedDB for large datasets

    Browser Compatibility

    What Is Browser Compatibility ?

    Browser compatibility refers to how consistently browser storage behaves across:

    • Chrome

    • Firefox

    • Edge

    • Safari

    • Mobile browsers

    Not all browsers handle storage in the same way.

    Differences Across Browsers

    Storage Limits May Vary

    • Chrome: Generally generous limits

    • Firefox: Similar to Chrome but stricter in private mode

    • Safari: Aggressive storage cleanup

    • Mobile browsers: Lower limits

    Private / Incognito Mode Limitations

    In private browsing mode:

    • localStorage may be cleared automatically

    • IndexedDB may not persist

    • Storage size is reduced

    This behavior differs across browsers.

    Safari-Specific Issues

    Safari may:

    • Clear storage after inactivity

    • Limit IndexedDB usage

    • Remove data to save space

    Developers must not rely on long-term persistence in Safari without fallback.

    Mobile Browser Limitations

    Mobile browsers:

    • Have less available storage

    • Clear storage aggressively

    • Limit background usage

    Apps must handle storage failures gracefully.

    Checking Storage Availability

    Before using storage:

Storage Support Check Example

Checks if browser storage is supported before using it. 

if (typeof Storage !== "undefined") {
  console.log("Storage supported");
} else {
  console.log("Storage not supported");
}

  • Handling Browser Storage Errors Safely

    Always use try-catch:

Storage Availability Handling Example

Uses try-catch to handle storage errors or limitations. 

try {
  localStorage.setItem("key", "value");
} catch (error) {
  console.log("Storage not available or quota exceeded");
}

  • Fallback Strategies

    If storage is unavailable:

    • Use in-memory variables

    • Store data on server

    • Use cookies as last option

    • Notify the user politely

    Best Practices for Browser Compatibility

    • Test on multiple browsers

    • Do not assume unlimited storage

    • Handle quota errors properly

    • Avoid browser-specific hacks

    • Use feature detection, not browser detection

    Common Mistakes

    • Assuming same storage size everywhere

    • Storing large objects in localStorage

    • Ignoring storage errors

    • Not testing on Safari or mobile

    • Relying only on localStorage

❮ Previous Next ❯