pushState e replaceState
Aggiornare l’URL del browser senza ricaricare completamente la pagina
pushState e replaceState è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
La History API
La History API consente a una pagina di modificare l'URL visualizzato nella barra degli indirizzi senza avviare una navigazione completa. In combinazione con il rendering lato client, permette di creare Single-Page Applications dall'aspetto nativo, senza rinunciare a URL che possono essere aggiunti ai segnalibri.
pushState
history.pushState(state, "", url) aggiunge una nuova voce alla cronologia del browser. L'URL nella barra degli indirizzi viene aggiornato immediatamente, senza effettuare richieste di rete. L'utente può tornare alla voce precedente con il pulsante Indietro del browser.
history.pushState({ view: "settings" }, "", "/settings");L'argomento state
Il primo argomento contiene dati serializzabili arbitrari associati alla voce. Può leggerli in seguito tramite history.state o negli eventi popstate. Li usi per passare lo stato dell'interfaccia (ad esempio quale scheda era aperta o la posizione di scorrimento), così tornando indietro può ripristinare esattamente la stessa vista.
L'argomento title
Il secondo argomento è il titolo della voce della cronologia. In pratica, tutti i browser moderni lo ignorano: per cambiare il titolo, imposti direttamente document.title = "...". Per convenzione, passi una stringa vuota; non ha alcun effetto.
L'argomento url
Il terzo argomento è il nuovo URL. Gli URL relativi vengono risolti rispetto alla pagina corrente; il nuovo URL deve avere la stessa origine, altrimenti viene generato un SecurityError. I browser non recuperano l'URL: pushState aggiorna solo la barra degli indirizzi e la cronologia.
replaceState
history.replaceState(state, "", url) sostituisce la voce corrente della cronologia invece di aggiungerne una nuova. Lo utilizzi quando desidera aggiornare l'URL senza creare un nuovo passaggio di navigazione all'indietro, ad esempio per aggiornare una stringa di query relativa ai filtri.
// Update query string in place
const url = new URL(location);
url.searchParams.set("filter", "open");
history.replaceState(null, "", url);Casi d'uso di pushState
Cambi di percorso in una SPA, ad esempio facendo clic su un link di navigazione senza un ricaricamento completo; apertura di una finestra modale, così il pulsante Indietro può chiuderla; transizioni tra i passaggi di una procedura guidata. Ogni stato significativo dovrebbe diventare una nuova voce della cronologia, affinché il pulsante Indietro si comporti come gli utenti si aspettano.
Casi d'uso di replaceState
Aggiornamenti di filtri, ordinamento e paginazione che non devono appesantire la cronologia, reindirizzamento dopo il completamento parziale di un modulo, aggiornamento dei parametri di monitoraggio senza creare voci navigabili. Quando l'utente torna indietro, questi stati «intermedi» vengono saltati.
Aggiornare la vista dopo pushState
pushState cambia solo l'URL: il codice deve aggiornare separatamente il DOM. Il modello è: eseguire il rendering del nuovo contenuto, quindi chiamare pushState. Insieme, le due operazioni producono l'esperienza di una SPA.
function navigate(path) {
renderPage(path);
history.pushState(null, "", path);
window.scrollTo(0, 0);
}Aggiornamenti del titolo e dei metadati
Aggiorni document.title e i meta tag og:title dopo la navigazione, così la condivisione sui social e i titoli delle schede del browser riflettono la vista corrente. Dimenticarsene lascia il titolo originale nelle condivisioni successive: è un bug delle SPA sottile ma comune.
pushState iniziale al caricamento della pagina
Chiamare pushState prima che l'utente abbia effettuato una navigazione sostituisce la voce iniziale. Per associare uno stato alla prima voce della pagina, utilizzi invece replaceState: aggiunge lo stato senza alterare la profondità della cronologia.
Vincolo di sicurezza
Gli URL di pushState devono avere la stessa origine. Tentare di eseguire pushState verso https://evil.com genera un SecurityError. In questo modo si impedisce alle pagine di falsificare la barra degli indirizzi e far credere agli utenti di trovarsi su un sito diverso.
Verifica delle conoscenze
Che cosa fa history.replaceState che history.pushState non fa?
Riepilogo
pushState aggiunge una nuova voce alla cronologia senza ricaricare la pagina: è la base del routing nelle SPA. replaceState aggiorna la voce corrente direttamente, per modifiche estetiche dell'URL. Entrambi richiedono URL con la stessa origine e ignorano l'argomento title. Aggiorni sempre separatamente il DOM e ricordi di aggiornare document.title e i meta tag dopo la navigazione.
Domande Frequenti
La lezione «pushState e replaceState» è gratuita?
Sì — il testo completo di «pushState e replaceState» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «pushState e replaceState»?
Aggiornare l’URL del browser senza ricaricare completamente la pagina Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «pushState e replaceState»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- pushState e replaceState
- L’evento popstate
- Routing basato su hash e su path a confronto
- La Navigation API nei browser moderni