W3Context Online Editor v1.1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML onstorage Event Attribute Example</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
        }

.panel {
            border: 1px solid #ccc;
            margin: 20px;
            padding: 20px;
            width: 45%;
        }

button,
        input {
            margin: 5px;
        }

#log {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            min-height: 100px;
        }
    </style>
</head>
<body>
    <h2>HTML onstorage Event Attribute Example</h2>
    <p>This event is triggered when another document (different tab on the same origin) changes the shared storage area.
    </p>
    <h5>Note: So make change storage in one tab watch the event log output in other duplicate open tab.(RightClick
        Duplicate Tab.)</h5>
    <div class="container">
        
        <div class="panel">
            <h2>Tab 1: Set data to the storage.</h2>
            <input type="text" id="keyInput" placeholder="Enter any name as key">
            <input type="text" id="valueInput" placeholder="Enter any name as value">
            <button onclick="setItem()">Set localStorage Item</button>
            <button onclick="clearStorage()">Clear All Storage</button>
            <p>Changes made here will trigger an event in other open tabs.</p>
        </div>

<div class="panel">
            <h2>Tab 2: Listen for Changes</h2>
            <p>Watch this log area for events triggered by the other open tab:</p>
            <div id="log"></div>
        </div>
    </div>
    <script>
        const logArea = document.getElementById('log');
        function setItem() {
            const key = document.getElementById('keyInput').value;
            const value = document.getElementById('valueInput').value;
            if (key && value) {
                // Setting an item triggers the 'storage' event in other tabs
                localStorage.setItem(key, value);
                logMsg('Set item: key=' + key + ' to value=' + value + '(Event does not fire in this tab and no logs, See other tab)');
            } else {
                alert('Please enter both key and value.');
            }
        }
        function clearStorage() {
            // Clearing the items also triggers the 'storage' event.
            localStorage.clear();
            logMsg('Cleared storage (Event does not fire in this tab and no logs, See other tab)');
        }
        // Events trigger from other tabs
        window.addEventListener('storage', function (event) {
            logMsg('Storage Area: ' + event.storageArea === localStorage ? 'localStorage' : 'sessionStorage');
            logMsg('URL(origin):' + event.url);
            logMsg('Old value: ' + event.oldValue);
            logMsg('New value: ' + event.newValue);
            logMsg('Key: ' + event.key);
            logMsg('------- Event Trigger and logs -------');
        });
        //logging messages
        function logMsg(message) {
            const entry = document.createElement('p');
            entry.textContent = new Date().toLocaleTimeString() + " : " + message;
            logArea.prepend(entry); // prepend messages.
            //logArea.append(entry); // append messages.
        }
    </script>
</body>
</html>