javascript – Object history and methods

I'm starting to explore the methods of the historical object that is part of the window object in the DOM and I was curious to know in which cases this might be useful. I understand that the object history and its methods are routine when you have to create multiple states of an HTML page, that is, when I want my registration page to be creates a status each time you focus on a different entry in the form that way. the user gives back will not come out of this HTML page if you do not go to the previous state that will just be the same page but before I put the focus on the entry current, it's a useful example but my form is ok to think so ?, from there I've checked an example like this:

HTML code



    
        
        pushState and popstate
        
        
    
    
        
a
two
three
four

Code JS

let boxes = Array.from (document.getElementsByClassName (& # 39; box & # 39;));

function selectBox (id) {
box.forEach (b => {
b.classList.toggle (& # 39; selected, b.id === id);
});
}

box.forEach (b => {
let id = b.id;
b.addEventListener ('click', e => {
history.pushState ({id}, `Selected: $ {id}`, `./selected = $ {id}`)
selectBox (id);
});
});

window.addEventListener ('popstate', e => {
selectBox (e.state.id);
});

history.replaceState ({id: null}, "Default State", "./ & # 39;);

CSS code

.boxes {
display: flex;
}

.box {
--box-color: black;
width: 200px;
height: 200px;
margin: 20px;
box size: border box;
display: block;
border-radius: 2px;
cursor: pointer;
White colour;
background color: var (- box color);
border: 5px solid var (- box color);
font size: 30px;
font family: sans-serif;
font weight: bold;
text-align: center;
line height: 200px;
transition: all 0.2s relax;
}

.box: hover {
background color: transparent;
black color;
}

.box.selected {
transform: scale (1.2);
}

# box-1 {
--box-color: network;
}

# box-2 {
--box-color: green;
}

# box-3 {
--box-color: blue;
}

# box-4 {
--box-color: black;
}

The program works well in navigating the history in both directions but my doubt arises according to the update of the page, that is to say that when I update the page I receive an error of the get method but i do not know if it is possible to do this it does not happen and you just go back to the same state of the page without this error.