JavaScript HTML DOM Events: pageshow

The pageshow event is fired when the user navigates to a web page – either on the initial load, or when returning from the browser's cache. On the event object, the event.persisted property lets us check whether the page was restored from the bfcache.
EXAMPLE
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pageshow – practical example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        body{
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        h2{
            margin-top: 0;
        }
        button{
            margin: 4px;
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
        }
        button:disabled{
            opacity: 0.6;
            cursor: not-allowed;
        }
        .status{
            margin-top: 12px;
            font-size: 14px;
        }
        textarea {
            resize: none;
            height: 100px;
            width: 380px;
        }
        .log{
            margin-top: 12px;
            padding: 8px;
            border: 1px solid #e5e7eb;
            max-height: 180px;
            overflow: auto;
            font-family: monospace;
            font-size: 13px;
        }
        @media screen and (max-width: 480px) {
            textarea {
                width: 100%;
            }
            h2 {
                font-size: 1.4rem;
                margin-bottom: 0.5rem;
                word-wrap: break-word;
            }
        }
    </style>
</head>
<body>
<div class="box">
    <h2>pageshow – restoring content</h2>

    <textarea id="note" placeholder="Type something…"></textarea>
    <p class="status" id="status">Your input will be saved when you leave the page and restored when the page is shown again.</p>

    <div class="log" id="log"></div>
    <button id="clearLogBtn">Clear history</button>
</div>

<script>
    const DEFAULT_MESSAGE = "Welcome to my tutorial!";

    const noteEl = document.getElementById("note");
    const statusEl = document.getElementById("status");
    const logEl = document.getElementById("log");
    const clearLogBtn = document.getElementById("clearLogBtn");

    // Save the input when the page becomes hidden (pagehide)
    window.addEventListener("pagehide", () => {
        if (noteEl.value && noteEl.value !== DEFAULT_MESSAGE) {
            sessionStorage.setItem("pageshow-demo-note", noteEl.value);
            log("pagehide → input saved to sessionStorage");
        } else {
            sessionStorage.removeItem("pageshow-demo-note");
            log("pagehide → default or empty text, nothing saved");
        }
    });

    // Restore the input when the page is shown (pageshow)
    window.addEventListener("pageshow", (e) => {
        const saved = sessionStorage.getItem("pageshow-demo-note");

        if (saved !== null) {
            noteEl.value = saved;
            statusEl.textContent = "The input was restored from sessionStorage.";
            log("pageshow → input restored");
        }   else {
            noteEl.value = DEFAULT_MESSAGE;
            statusEl.textContent = "No saved input. Default text is shown.";
            log("pageshow → default text set");
        }

        // Was the page restored from the bfcache?
        if (e.persisted) {
            log("pageshow → page was restored from the back-forward cache (bfcache)");
        } else {
            log("pageshow → freshly (newly) loaded page");
        }
    });

    // Helper – append log messages to the .log div
    function log(message){
        const line = document.createElement("div");
        line.textContent = `${new Date().toLocaleTimeString()} – ${message}`;
        logEl.appendChild(line);
        logEl.scrollTop = logEl.scrollHeight;
    }

    // Button: clear history (log) and optionally the saved input
    clearLogBtn.addEventListener("click", () => {
        // clear log
        logEl.innerHTML = "";
    
        // clear textarea content
        noteEl.value = "";
    
        // optionally also remove the saved input from 
        // sessionStorage.removeItem("pageshow-demo-note");
    
        log("history cleared (log and input were reset)");
    });

    document.addEventListener("DOMContentLoaded", () => {
        log("DOMContentLoaded – page is ready");
    });
</script>
</body>
</html>
RESULT