* History 이벤트: pushState()를 몇번 누른 뒤, [뒤로] 및 [앞으로] 버튼들을 눌러보세요..

뒤로 pushState() 앞으로

                                
                                    const pushStateBtn= document.querySelector('#pushState_btn')
                                    const backBtn= document.querySelector('#go_back_btn')
                                    const forwardBtn= document.querySelector('#go_forward_btn')

                                    pushStateBtn.addEventListener('click', () => {
                                        history.pushState({ id: 100 }, "ID-100 유저방", "?users/100")
                                    });
                                    backBtn.addEventListener('click', () => {history.back() })
                                    forwardBtn.addEventListener('click', () => {history.forward()})

                                    window.addEventListener('popstate', (e) => {
                                        alert(`location: ${document.location}, title: ${document.title}, state: ${JSON.stringify(e.state)}`) // history.state에 접근 가능!
                                    });
                                
                            

☞ popstate 발생 시의 이벤트 객체에는 세션 상태 정보인 history.state가 담긴다!