Cookies and Web Storage: What Websites Store About You

Published: January 2024
Reading time: 7 minutes

Every website stores data in your browser. Cookies, localStorage, sessionStorage - they all serve different purposes. Here's what developers need to know about browser storage.

Types of Browser Storage

1. Cookies - The Classic

// Setting a cookie
document.cookie = "user_id=123; max-age=86400; path=/; secure; samesite=strict";

// What each part means:
// user_id=123      → Key-value pair
// max-age=86400    → Expires in 24 hours
// path=/           → Available site-wide
// secure           → HTTPS only
// samesite=strict  → CSRF protection

Size limit: 4KB per cookie Sent with: Every HTTP request Use for: Authentication, preferences

2. localStorage - The Persistent Store

// Store data (persists forever)
localStorage.setItem('theme', 'dark');
localStorage.setItem('user_preferences', JSON.stringify({
  language: 'en',
  timezone: 'UTC'
}));

// Retrieve data
const theme = localStorage.getItem('theme');

Size limit: 5-10MB Sent with: Never Use for: User settings, offline data

3. sessionStorage - The Temporary Store

// Store data (until tab closes)
sessionStorage.setItem('form_draft', JSON.stringify(formData));
sessionStorage.setItem('scroll_position', window.scrollY);

// Clear on navigation
window.addEventListener('beforeunload', () => {
  sessionStorage.clear();
});

Size limit: 5-10MB Sent with: Never Use for: Temporary state, form data

4. IndexedDB - The Database

// Store complex data
const request = indexedDB.open('MyApp', 1);
request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  store.add({ id: 1, name: 'John', data: largeObject });
};

Size limit: Gigabytes Sent with: Never Use for: Offline apps, large datasets

What Websites Actually Store

E-commerce Sites

// Shopping cart
localStorage.setItem('cart', JSON.stringify([
  { product_id: 123, quantity: 2 },
  { product_id: 456, quantity: 1 }
]));

// User preferences
localStorage.setItem('currency', 'USD');
localStorage.setItem('recently_viewed', '[123, 456, 789]');

// Session data
sessionStorage.setItem('checkout_step', '2');
sessionStorage.setItem('promo_shown', 'true');

// Authentication
document.cookie = "session_id=abc123; httponly; secure";

News/Media Sites

// Paywall tracking
localStorage.setItem('articles_read', '3');
localStorage.setItem('last_visit', Date.now());

// Personalization
localStorage.setItem('interests', '["tech", "business"]');

// A/B testing
document.cookie = "experiment_group=B; max-age=2592000";

SaaS Applications

// JWT token
localStorage.setItem('auth_token', 'eyJhbGciOiJIUzI1NiIs...');

// User data cache
localStorage.setItem('user_profile', JSON.stringify(userData));

// App state
localStorage.setItem('sidebar_collapsed', 'true');
localStorage.setItem('last_workspace', 'workspace_123');

Tracking and Privacy

First-Party vs Third-Party

First-party cookies (your domain):

Domain: example.com
Cookie: session_id=abc123
Purpose: Keep you logged in

Third-party cookies (other domains):

Domain: doubleclick.net
Cookie: ad_user_id=xyz789
Purpose: Track across sites

Common Tracking Patterns

1. Analytics Tracking:

// Google Analytics
_ga=GA1.2.123456789.1234567890     // User ID
_gid=GA1.2.987654321.0987654321    // Session ID

// What it tracks:
// - Pages visited
// - Time on site
// - Browser/device
// - Geographic location

2. Marketing Pixels:

// Facebook Pixel
_fbp=fb.1.1234567890.987654321     // Facebook browser ID

// Tracks:
// - Pages visited
// - Products viewed
// - Purchases made
// - Cross-site behavior

3. Session Recording:

// Tools like Hotjar/FullStory
localStorage.setItem('recording_id', 'sess_abc123');

// May capture:
// - Mouse movements
// - Clicks
// - Form inputs (careful!)
// - Scrolling

Security Considerations

1. HttpOnly Cookies

// Server sets (JavaScript can't access):
Set-Cookie: session_id=abc123; HttpOnly

// Prevents XSS attacks from stealing sessions

2. Secure Flag

// HTTPS only
Set-Cookie: auth_token=xyz789; Secure

// Won't send over HTTP

3. SameSite Protection

// Strict: Only same-site requests
Set-Cookie: csrf_token=abc; SameSite=Strict

// Lax: Top-level navigation OK
Set-Cookie: session=xyz; SameSite=Lax

// None: Cross-site OK (requires Secure)
Set-Cookie: tracking=123; SameSite=None; Secure

4. Content Security Policy

<!-- Restrict where data goes -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               connect-src 'self' https://api.example.com">

Developer Best Practices

1. Storage Strategy

// Use the right storage for the job
class StorageManager {
  // Short-term + needs server = cookie
  setSession(id) {
    document.cookie = `session=${id}; max-age=3600; secure; httponly`;
  }
  
  // Long-term + client only = localStorage
  setTheme(theme) {
    localStorage.setItem('theme', theme);
  }
  
  // Temporary + sensitive = sessionStorage
  setFormDraft(data) {
    sessionStorage.setItem('draft', JSON.stringify(data));
  }
  
  // Large data = IndexedDB
  async cacheApiResponse(data) {
    // IndexedDB implementation
  }
}

2. Data Expiration

// Add timestamps to localStorage
function setWithExpiry(key, value, ttl) {
  const now = new Date();
  const item = {
    value: value,
    expiry: now.getTime() + ttl
  };
  localStorage.setItem(key, JSON.stringify(item));
}

function getWithExpiry(key) {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) return null;
  
  const item = JSON.parse(itemStr);
  const now = new Date();
  
  if (now.getTime() > item.expiry) {
    localStorage.removeItem(key);
    return null;
  }
  return item.value;
}

3. Storage Limits

// Check available space
if ('storage' in navigator && 'estimate' in navigator.storage) {
  const {usage, quota} = await navigator.storage.estimate();
  console.log(`Using ${usage} of ${quota} bytes`);
}

// Handle quota errors
try {
  localStorage.setItem('key', bigData);
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    // Clear old data
    clearOldEntries();
  }
}

Privacy and GDPR

Cookie Consent Requirements

// Check consent before setting
if (hasConsent('analytics')) {
  // Set analytics cookies
  gtag('config', 'GA_MEASUREMENT_ID');
}

if (hasConsent('marketing')) {
  // Set marketing cookies
  fbq('init', 'PIXEL_ID');
}

// Essential cookies (no consent needed)
document.cookie = "session_id=abc; secure; httponly";

Data Deletion Rights

// Clear all user data
function deleteAllUserData() {
  // Cookies
  document.cookie.split(";").forEach(c => {
    document.cookie = c.replace(/^ +/, "")
      .replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
  });
  
  // localStorage
  localStorage.clear();
  
  // sessionStorage
  sessionStorage.clear();
  
  // IndexedDB
  indexedDB.deleteDatabase('MyApp');
}

Debugging Storage

Browser DevTools

View all storage:

1. Open DevTools (F12)
2. Application/Storage tab
3. See all cookies, localStorage, etc.

Monitor changes:

// Listen for storage changes
window.addEventListener('storage', (e) => {
  console.log('Storage changed:', e.key, e.oldValue, e.newValue);
});

Quick Audit Script

// See what a site stores
function auditStorage() {
  console.group('🍪 Cookies');
  console.log(document.cookie.split(';').length + ' cookies set');
  console.log(document.cookie);
  console.groupEnd();
  
  console.group('💾 localStorage');
  console.log(Object.keys(localStorage).length + ' items');
  for (let key in localStorage) {
    console.log(key + ':', localStorage[key].substring(0, 50) + '...');
  }
  console.groupEnd();
  
  console.group('📋 sessionStorage');
  console.log(Object.keys(sessionStorage).length + ' items');
  for (let key in sessionStorage) {
    console.log(key + ':', sessionStorage[key].substring(0, 50) + '...');
  }
  console.groupEnd();
}

Storage Checklist

When analyzing any website:

• Check cookie count and sizes
• Look for tracking cookies
• Check localStorage usage
• Verify secure flags on auth cookies
• Look for sensitive data in storage
• Check third-party cookies
• Verify SameSite settings
• Test incognito/private mode

The Bottom Line

Browser storage powers modern web apps, but with great power comes responsibility:

• Use cookies for auth and server needs
• Use localStorage for preferences and offline data
• Use sessionStorage for temporary state
• Always consider privacy and security
• Respect user choices about tracking

Understanding storage helps you build better apps and protect user privacy.

---

Analyze website storage instantly: Fusebox shows all cookies, localStorage, and tracking data while you browse. See what sites store about you. $29 one-time purchase.