JavaScript HTML DOM Dogodki: pageshow

Dogodek pageshow nastane, ko se uporabnik pomakne na spletno stran – bodisi ob prvem nalaganju, bodisi ob vračanju iz predpomnilnika brskalnika. V objektu dogodka event.persisted lahko preverimo, ali je bila stran obnovljena iz bfcache.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>pageshow – praktičen primer</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 – obnovitev vsebine</h2>

    <textarea id="note" placeholder="Vpišite nekaj…"></textarea>
    <p class="status" id="status">Vnos bo shranjen, ko stran zapustite, in obnovljen, ko se stran prikaže.</p>

    <div class="log" id="log"></div>
    <button id="clearLogBtn">Izbriši zgodovino</button>
</div>

<script>
    const DEFAULT_MESSAGE = 'Dobrodošli v moji vadnici!';

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

    // Shrani vnos, ko stran postane nevidna (pagehide)
    window.addEventListener('pagehide', () => {
        if (noteEl.value && noteEl.value !== DEFAULT_MESSAGE) {
            sessionStorage.setItem('pageshow-demo-note', noteEl.value);
            log('pagehide → vnos shranjen v sessionStorage');
        } else {
            sessionStorage.removeItem('pageshow-demo-note');
            log('pagehide → privzeto ali prazno besedilo, nič ni shranjeno');
        }
    });

    // Obnovi vnos, ko se stran prikaže (pageshow)
    window.addEventListener('pageshow', (e) => {
        const saved = sessionStorage.getItem('pageshow-demo-note');

        if (saved !== null) {
            noteEl.value = saved;
            statusEl.textContent = 'Vnos je bil obnovljen iz sessionStorage.';
            log('pageshow → vnos obnovljen');
        }   else {
            noteEl.value = DEFAULT_MESSAGE;
            statusEl.textContent = 'Ni shranjenega vnosa. Prikazano je privzeto besedilo.';
            log('pageshow → privzeto besedilo nastavljeno');
        }

        // Je bila stran obnovljena iz predpomnilnika bfcache?
        if (e.persisted) {
            log('pageshow → stran je bila obnovljena iz predpomnilnika (bfcache)');
        } else {
            log('pageshow → sveža (nova) naložena stran');
        }
    });

    // Helper – sporočila dnevnika v .log div
    function log(message){
        const line = document.createElement('div');
        line.textContent = `${new Date().toLocaleTimeString()} – ${message}`;
        logEl.appendChild(line);
        logEl.scrollTop = logEl.scrollHeight;
    }

    // Gumb: izbriši zgodovino (dnevnik) in po želji tudi shranjen vnos
    clearLogBtn.addEventListener("click", () => {
        // izbriši log
        logEl.innerHTML = "";
    
        // izbriši vsebino textarea
        noteEl.value = "";
    
        // izbriši tudi shranjen vnos iz sessionStorage (če želiš)
        // sessionStorage.removeItem("pageshow-demo-note");
    
        log("zgodovina izbrisana (log in vnos sta bila počiščena)");
    });

    document.addEventListener('DOMContentLoaded', () => {
        log('DOMContentLoaded – stran je pripravljena');
    });
</script>
</body>
</html>

REZULTAT