React Caching Data With Cookies

Edit PagePage History

Overview

Web applications often need to remember information between page refreshes or browser sessions. Cookies are small pieces of data stored in your browser that help maintain this information. Think of cookies like a coat check ticket - they're small, contain specific information, and help you retrieve something later.

🎥 Video: What Are Cookies? And How They Work | Explained for Beginners! (5 minutes)

What are Cookies?

Cookies are small text files that websites store on your computer. They typically contain data about your preferences, login status, or other information needed across multiple pages. Unlike local storage, cookies are automatically sent with every request to the server.

🎥 Video: JavaScript Cookies vs Local Storage vs Session Storage (15 minutes)

1. Cookie Management

Basic Cookie Operations

Before diving into code, let's understand the basic operations we can perform with cookies. Cookies have several components: name, value, expiration date, and various security flags. Think of them like a sticky note with special instructions about when it should be thrown away and who can read it.

// Setting a basic cookie
function setCookie(name, value, days) {
  // Calculate expiration date
  const expirationDate = new Date();
  expirationDate.setDate(expirationDate.getDate() + days);
  
  // Create cookie string with name, value, and expiration
  const cookieString = `${name}=${value};expires=${expirationDate.toUTCString()};path=/`;
  
  // Set the cookie
  document.cookie = cookieString;
}

// Reading a cookie
function getCookie(name) {
  // Get all cookies and split into individual cookies
  const cookies = document.cookie.split(';');
  
  // Find and return the specific cookie we want
  const cookie = cookies.find(c => c.trim().startsWith(name + '='));
  return cookie ? cookie.split('=')[1] : null;
}

// Deleting a cookie
function deleteCookie(name) {
  // Set expiration to past date to delete
  document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
}

🎥 Video: How To Get And Set Cookies With JavaScript

Cookie Management Hook

Here's a custom React hook that makes working with cookies easier:

function useCookie(key, initialValue) {
  // Get initial cookie value or use initialValue
  const [value, setValue] = useState(() => {
    const cookie = getCookie(key);
    return cookie ?? initialValue;
  });

  // Update cookie when value changes
  useEffect(() => {
    setCookie(key, value, 7); // Store for 7 days
  }, [key, value]);

  return [value, setValue];
}

// Example usage
function UserPreferences() {
  const [theme, setTheme] = useCookie('theme', 'light');
  
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Toggle Theme
    </button>
  );
}

📖 MDN: Document.cookie

2. Secure Cookie Implementation

Security is crucial when working with cookies. Cookies can be vulnerable to various attacks, so we need to implement several security measures. Think of secure cookies like a safety deposit box - they have multiple locks and can only be accessed under specific conditions.

function setSecureCookie(name, value, days) {
  const expirationDate = new Date();
  expirationDate.setDate(expirationDate.getDate() + days);
  
  // Add security flags
  const cookieString = `${name}=${value};` +
    `expires=${expirationDate.toUTCString()};` +
    'path=/;' +
    'Secure;' +          // Only sent over HTTPS
    'SameSite=Strict;' + // Protect against CSRF
    'HttpOnly';          // Prevent JavaScript access
    
  document.cookie = cookieString;
}

Security best practices visualization:

🎥 Video: Your App Is NOT Secure If You Don’t Use CSRF Tokens (10 minutes)

3. Browser Storage Alternatives

Cookies aren't the only way to store data in the browser. Different storage methods serve different purposes. Think of these like different types of storage units - each with its own size limits, security features, and ease of access.

Storage Options Comparison

// Local Storage - Persists until explicitly cleared
localStorage.setItem('user', JSON.stringify({ name: 'John' }));

// Session Storage - Clears when tab closes
sessionStorage.setItem('tempData', JSON.stringify({ draft: 'My post' }));

// IndexedDB - For larger amounts of structured data
const dbRequest = indexedDB.open('MyDB', 1);
dbRequest.onsuccess = (event) => {
  const db = event.target.result;
  // Use the database...
};

Storage comparison:

📖 MDN: Web Storage API 🎥 Video: JavaScript Cookies vs Local Storage vs Session Storage

4. Cache Invalidation Strategies

Cache invalidation ensures that stored data doesn't become stale. This is one of the hardest problems in computer science! Think of it like managing a restaurant's food inventory - you need to know when food expires and when to order fresh supplies.

Time-Based Invalidation

function useTimedCache(key, fetchData, timeToLive) {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    // Check if we have cached data
    const cached = getCookie(key);
    if (cached) {
      const { value, timestamp } = JSON.parse(cached);
      
      // Check if cache is still valid
      if (Date.now() - timestamp < timeToLive) {
        setData(value);
        return;
      }
    }
    
    // Fetch fresh data if cache is invalid
    const fetchAndCache = async () => {
      const freshData = await fetchData();
      const cacheData = {
        value: freshData,
        timestamp: Date.now()
      };
      
      setCookie(key, JSON.stringify(cacheData));
      setData(freshData);
    };
    
    fetchAndCache();
  }, [key, fetchData, timeToLive]);
  
  return data;
}

Cache invalidation strategies:

🎥 Video: Why not Cache Everything?

Best Practices

1. Security

• Always use secure flags for sensitive data
• Implement proper expiration dates
• Never store sensitive information in plain text
• Use HttpOnly flags when JavaScript access isn't needed

2. Performance

• Only cache what's necessary
• Implement proper invalidation strategies
• Use appropriate storage method for data size
• Consider bandwidth impact of cookies

3. User Experience

• Handle cache misses gracefully
• Show loading states when fetching fresh data
• Provide clear error messages
• Respect user privacy settings

Additional Resources

• 📖 MDN: HTTP Cookies
• 📖 React Cookie Documentation