Local Storage vs Session Storage vs Cookie Storage

development

Legacy Content Notice: This post from 2019 provides a basic comparison of client-side storage options. While still accurate, modern web development includes additional considerations like storage quotas, privacy restrictions, and newer APIs. For comprehensive modern JavaScript development practices, see our Modern JavaScript Development Guide.

If you're like me you always need to lookup the difference between local storage, session storage and cookies.

This post is for those that are always reaching for that comparison.

Local Storage

  • Stores data with no expiry date
  • Cleared only via JavaScript or clearing browser cache
  • Storage limit is the largest of the 3 as big as 5MB
  • Not supported by older browsers IE7 or lower
  • Works on same-origin policy. So, data stored will only be available on the same origin.

Session Storage

  • Stores data only for the duration of the session, when the user closes their browser the data is lost
  • Top-level browsing context, therefore it's unique to each browser tab
  • Storage limit is larger than cookies at 5MB
  • Not supported by older browsers IE7 or lower

Cookies

  • Stores data that can be transferred to the server via headers
  • LocalStorage and SessionStorage can only be accessed on client-side
  • Expiry is set on creation of the cookie
  • Storage limit is smallest at 4kb
  • Cookies can be made secure making client side unable to read the contents. This is important for authentication to store user tokens.

Modern Considerations (2024+)

Storage Quotas and Limits

Modern browsers implement dynamic storage quotas that can vary based on available disk space and user behavior. Use the Storage API to check available quota:

// Check storage quota
if ("storage" in navigator && "estimate" in navigator.storage) {
    navigator.storage.estimate().then((estimate) => {
        console.log(`Available: ${estimate.quota} bytes`);
        console.log(`Used: ${estimate.usage} bytes`);
    });
}

Privacy and Partitioning

  • Third-party storage blocking: Many browsers now block third-party access to storage APIs
  • Storage partitioning: Storage is increasingly partitioned by site to prevent cross-site tracking
  • Incognito mode: Private browsing modes have different storage behaviors

IndexedDB for Complex Data

For structured data and complex storage needs, consider IndexedDB:

// Modern IndexedDB with async/await
async function saveUserPreferences(preferences) {
    const db = await openDB("UserData", 1);
    await db.put("preferences", preferences, "user-prefs");
}

Modern cookie security includes:

  • SameSite attribute for CSRF protection
  • Secure flag for HTTPS-only transmission
  • HttpOnly for XSS protection
// Modern secure cookie setting
document.cookie =
    "token=abc123; SameSite=Strict; Secure; HttpOnly; Max-Age=3600";

Quick Reference Table

| Feature | localStorage | sessionStorage | Cookies | IndexedDB | | ------------------- | ------------- | -------------- | ------------------ | ------------- | | Persistence | Until cleared | Session only | Until expired | Until cleared | | Capacity | ~5-10MB | ~5-10MB | 4KB | ~50MB+ | | Server Access | No | No | Yes | No | | API Complexity | Simple | Simple | Manual | Complex | | Performance | Fast | Fast | Sent with requests | Very fast | | Browser Support | IE8+ | IE8+ | All | IE10+ |

Follow Me Subscribe To RSS Feed Subscribe To Email