Web Storage API

The Web Storage API provides a way to store data in the user's browser.

Two Types of Storage

localStorage

<script>
    // Save data
    localStorage.setItem('name', 'John Smith');
    localStorage.setItem('studentId', '1234567890');

    // Get data
    const name = localStorage.getItem('name');
    console.log(name); // "John Smith"

    // Remove data
    localStorage.removeItem('name');

    // Remove everything
    localStorage.clear();
</script>

sessionStorage

<script>
    // Save data (only for this session)
    sessionStorage.setItem('login', 'true');

    // Get data
    const login = sessionStorage.getItem('login');

    // Remove data
    sessionStorage.removeItem('login');
</script>

Case Study: Campus Authentication System

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Campus Authentication System</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', sans-serif;
            background: #f0f2f5;
            min-height: 100vh;
        }

        .container {
            max-width: 400px;
            margin: 0 auto;
            padding: 2rem;
        }

        .card {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        h1 {
            color: #1e3a5f;
            text-align: center;
            margin-bottom: 2rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            color: #333;
            font-weight: 500;
        }

        input {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }

        input:focus {
            outline: none;
            border-color: #3498db;
        }

        .btn {
            width: 100%;
            padding: 0.8rem;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            cursor: pointer;
        }

        .btn:hover {
            background: #2980b9;
        }

        .btn-danger {
            background: #e74c3c;
        }

        .btn-danger:hover {
            background: #c0392b;
        }

        .remember-me {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .dashboard {
            display: none;
        }

        .dashboard.active {
            display: block;
        }

        .welcome {
            background: #d4edda;
            padding: 1rem;
            border-radius: 4px;
            margin-bottom: 1rem;
            color: #155724;
        }

        .user-info {
            background: #f8f9fa;
            padding: 1rem;
            border-radius: 4px;
            margin-bottom: 1rem;
        }

        .user-info p {
            margin-bottom: 0.5rem;
        }

        .error {
            background: #f8d7da;
            color: #721c24;
            padding: 0.8rem;
            border-radius: 4px;
            margin-bottom: 1rem;
            display: none;
        }

        .error.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Login Form -->
        <div class="card" id="loginForm">
            <h1>Campus Login</h1>

            <div class="error" id="error"></div>

            <div class="form-group">
                <label for="studentId">StudentID</label>
                <input type="text" id="studentId" placeholder="Enter Student ID">
            </div>

            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" placeholder="Enter password">
            </div>

            <div class="remember-me">
                <input type="checkbox" id="remember">
                <label for="remember">Remember me</label>
            </div>

            <button class="btn" onclick="login()">Login</button>
        </div>

        <!-- Dashboard -->
        <div class="card dashboard" id="dashboard">
            <div class="welcome" id="welcome"></div>

            <div class="user-info">
                <p><strong>StudentID:</strong> <span id="displayStudentId"></span></p>
                <p><strong>Name:</strong> <span id="displayName"></span></p>
                <p><strong>Department:</strong> <span id="displayDepartment"></span></p>
            </div>

            <button class="btn btn-danger" onclick="logout()">Logout</button>
        </div>
    </div>

    <script>
        // Dummy database
        const users = {
            '1234567890': {
                name: 'John Smith',
                department: 'Computer Science',
                password: 'password123'
            },
            '0987654321': {
                name: 'Sarah Lee',
                department: 'Information Systems',
                password: 'password456'
            }
        };

        // Check login on load
        window.onload = function() {
            const isLoggedIn = sessionStorage.getItem('isLoggedIn');
            const savedUser = localStorage.getItem('currentUser');

            if (isLoggedIn === 'true' && savedUser) {
                showDashboard(JSON.parse(savedUser));
            }
        };

        function login() {
            const studentId = document.getElementById('studentId').value;
            const password = document.getElementById('password').value;
            const remember = document.getElementById('remember').checked;

            // Validate
            if (!studentId || !password) {
                showError('StudentID and password are required!');
                return;
            }

            // Check credentials
            if (users[studentId] && users[studentId].password === password) {
                const user = users[studentId];

                // Save session
                sessionStorage.setItem('isLoggedIn', 'true');

                // Save user if "remember me" is checked
                if (remember) {
                    localStorage.setItem('currentUser', JSON.stringify({
                        studentId: studentId,
                        name: user.name,
                        department: user.department
                    }));
                }

                showDashboard({ studentId, ...user });
            } else {
                showError('Wrong StudentID or password!');
            }
        }

        function showDashboard(user) {
            document.getElementById('loginForm').style.display = 'none';
            document.getElementById('dashboard').classList.add('active');

            document.getElementById('welcome').textContent = 
                `Welcome, ${user.name}!`;
            document.getElementById('displayStudentId').textContent = user.studentId;
            document.getElementById('displayName').textContent = user.name;
            document.getElementById('displayDepartment').textContent = user.department;
        }

        function logout() {
            sessionStorage.removeItem('isLoggedIn');
            localStorage.removeItem('currentUser');

            document.getElementById('loginForm').style.display = 'block';
            document.getElementById('dashboard').classList.remove('active');

            document.getElementById('studentId').value = '';
            document.getElementById('password').value = '';
        }

        function showError(message) {
            const error = document.getElementById('error');
            error.textContent = message;
            error.classList.add('active');

            setTimeout(() => {
                error.classList.remove('active');
            }, 3000);
        }
    </script>
</body>
</html>

Everyday Case Study

Case: A developer needs to store the user's dark/light theme preference.

<button onclick="toggleTheme()">Toggle Tema</button>

<script>
    // Load saved theme
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.body.className = savedTheme;

    function toggleTheme() {
        const current = document.body.className;
        const next = current === 'light' ? 'dark' : 'light';

        document.body.className = next;
        localStorage.setItem('theme', next);
    }
</script>

localStorage vs sessionStorage

Best Practices

1. Don't store sensitive data: Not safe for passwords or tokens
2. Error handling: Check browser support
3. Size limit: Don't store too much
4. JSON: Use JSON.stringify/parse for objects
5. Cleanup: Remove data that is no longer needed

Summary

The Web Storage API enables data storage in the browser. Use localStorage for permanent data and sessionStorage for temporary data.