What exactly is the pushState state object in HTML?

The pushState state object is a JavaScript object that stores data associated with a specific history entry in the browser's history stack. It allows you to save information that can be retrieved when the user navigates back or forward through history.

Syntax

history.pushState(state, title, url);

Parameters

• state - An object containing data to associate with the history entry
• title - The title for the new history entry (often ignored by browsers)
• url - The new URL to display in the address bar

Example: Creating History Entries with State

<script>
function display(color) {
    var myState = { selectedColor: color };
    var myTitle = "Page title";
    var myPath = "/" + color;
    
    history.pushState(myState, myTitle, myPath);
    console.log("Created history entry for color: " + color);
    console.log("State object:", myState);
}

// Create some history entries
display("red");
display("blue");
display("green");
</script>

Handling popstate Events

When users navigate back/forward, the popstate event fires with the stored state object:

<script>
window.addEventListener('popstate', function(event) {
    var myState = event.state;
    if (myState) {
        console.log("Retrieved state:", myState);
        console.log("Selected color:", myState.selectedColor);
        // Update UI based on the state
        selectColor(myState.selectedColor);
    }
});

function selectColor(color) {
    console.log("Selecting color: " + color);
    // Update page elements to reflect the selected color
}
</script>

Complete Example

<div id="colorBox" style="width: 100px; height: 100px; border: 1px solid #000;"></div>
<button onclick="changeColor('red')">Red</button>
<button onclick="changeColor('blue')">Blue</button>
<button onclick="changeColor('green')">Green</button>

<script>
function changeColor(color) {
    // Update the UI
    document.getElementById('colorBox').style.backgroundColor = color;
    
    // Create history entry with state
    var state = { selectedColor: color, timestamp: Date.now() };
    history.pushState(state, "Color: " + color, "/color/" + color);
}

// Handle browser back/forward buttons
window.addEventListener('popstate', function(event) {
    if (event.state && event.state.selectedColor) {
        document.getElementById('colorBox').style.backgroundColor = event.state.selectedColor;
        console.log("Restored color from history:", event.state.selectedColor);
    }
});
</script>

Key Points

• The state object can contain any serializable data structure
• State data is only available when navigating through history, not on page refresh
• Maximum size limit is typically 640k characters (browser dependent)
• Use meaningful state objects to recreate the exact page state

Conclusion

The pushState state object enables you to store custom data with history entries, allowing seamless navigation experiences. It's essential for single-page applications that need to maintain state across browser navigation.