Hackforge Academy

Explanation

Do We Need Cache in Frontend? Yes. Frontend caching helps reduce API calls, improve page load speed, and provide a better user experience. Frequently used data can be stored locally and reused instead of requesting it from the server every time.

Code:

// Without Cache -> API Call Every Time
// With Cache -> Use Local Data

Explanation

Browser Cache Browsers automatically cache static files such as HTML, CSS, JavaScript, and images. When users revisit the application, these files can be loaded from the cache instead of being downloaded again.

Code:

// Browser Cache
// CSS, JS, Images
// Faster Page Loading

Explanation

Slide 3: Local Storage Cache Local Storage allows data to be stored in the browser and reused across page refreshes.

Code:

localStorage.setItem('username', 'John');

const user = localStorage.
getItem('username');
console.log(user);

Explanation

Session Storage Cache Session Storage works like Local Storage, but the data is cleared when the browser tab is closed.

Code:

sessionStorage.setItem('token', 'abc123');

const token = sessionStorage.
getItem('token');

Explanation

Slide 5: API Response Caching Frontend applications can store API responses and reuse them to avoid repeated network requests.

Code:

const cachedUsers = localStorage.
getItem('users');

if (cachedUsers) {
    console.log(JSON.parse(cachedUsers));
} else {
    fetch('/api/users')
        .then(res => res.json())
        .then(data => {
            localStorage.
setItem('users', JSON.stringify(data));
        });
}

Explanation

Slide 6: When to Use Frontend Cache? Use caching for frequently accessed data such as user profiles, settings, product catalogs, and API responses. Avoid caching sensitive or frequently changing data unless proper cache invalidation is implemented.

Code:

// Good: User Settings, Product List
// Good: Static Data
// Avoid: Sensitive Data
// Avoid: Frequently Changing Data