히스토리 스택과의 상호 작용

JS Trivia 시간: 다음 코드가 주어지면 무엇을 기록합니까?

window.history.pushState(null, null, "/temp1");
window.history.pushState(null, null, "/temp2");
window.history.pushState(null, null, "/temp3");

console.log("before go", window.history.length);
window.history.go(-3);

console.log("after go", window.history.length);
window.history.pushState(null, null, "/temp4");

console.log("after go after pushState", window.history.length);

답변(클릭하면 볼 수 있습니다)

before go 4
after go 4
after go after pushState 2

후속 질문!

window.history.pushState(null, null, "/temp1");
window.history.pushState(null, null, "/temp2");
window.history.pushState(null, null, "/temp3");

console.log("before go", window.history.length);
window.history.go(-3);

console.log("after go", window.history.length);
window.history.replaceState(null, null, "/temp4");

console.log("after go after replaceState", window.history.length);

답변(클릭하면 볼 수 있습니다)

before go 4
after go 4
after go after replaceState 4

무슨 일이야?

히스토리 스택을 통해 탐색할 수 있으며 탐색을 통해 스택을 유지합니다. 그러나 스택에 푸시하면 스택의 현재 위치에서 향후 탐색이 지워집니다.

단순화된 데모:

window.history.pushState(null, null, "/temp1");
// history.stack looks like ['', '/temp1']
// current entry is '/temp1'

window.history.pushState(null, null, "/temp2");
// history.stack looks like ['', '/temp1', '/temp2']
// current entry is '/temp2'

window.history.pushState(null, null, "/temp3");
// history.stack looks like ['', '/temp1', '/temp2', '/temp3']
// current entry is '/temp3'

console.log("before go", window.history.length);
// before go 4

window.history.go(-3);
// history.stack looks like ['', '/temp1', '/temp2', '/temp3']
// current entry is ''

console.log("after go", window.history.length);
// after go 4

window.history.pushState(null, null, "/temp4");
// history.stack looks like ['', '/temp4']
// current entry is '/temp4'

console.log("after go after pushState", window.history.length);
// after go after pushState 2

위의 pushState 호출을 replaceState 로 변경하기만 하면 다음과 같습니다.

window.history.replaceState(null, null, "/temp4");
// history.stack looks like ['/temp4', '/temp1', '/temp2', '/temp3']
// current entry is '/temp4'

스펙토크

다음은 WHATWG HTML spec for history update steps 에 대한 링크입니다.

여기서 주목해야 할 핵심은 2단계입니다.

2 If isPush is true, then:

2.1 Remove all the entries in browsingContext's session history after the current entry. If the current entry is the last entry in the session history, then no entries are removed.

isPush는 pushState에 대해 true이고 replaceState에 대해 false입니다. 이는 pushState에 대해 여기에서, replaceState에 대해 여기에서 찾을 수 있습니다 - 해당 문장의 마지막 단어에 주의하십시오.