html 5, history 의 pushState, replaceState 뒤로가기

<form id="msgbox" action="#" method="get">
    <fieldset>
        <label for="msg">state message</label>
        <input id="msg" type="text" value="" />
        <input id="type" type="hidden" value="" />
        <div class="button">
            <button id="push">history.pushState</button>
            <button id="replace">history.replaceState</button>
        </div>
    </fieldset>
</form>

<pre id="log">History information log
=======================
</pre>

<script>
// elements
var
    msgbox = document.getElementById("msgbox"),
    msg = document.getElementById("msg"),
    type = document.getElementById("type"),
    push = document.getElementById("push"),
    replace = document.getElementById("replace"),
    log = document.getElementById("log");
    
// state counter
var state = 0;


// push 의 button 클릭시 이벤트 (button id 값 할당하기)
push.addEventListener("click", StateType, false);

// replace 의 button 클릭시 이벤트 (button id 값 할당하기)
replace.addEventListener("click", StateType, false);


// 버튼 클릭시 form 형식으로 submit 할때, StoreState(push, replace) 함수 호출
msgbox.addEventListener("submit", StoreState, false);

// button click 의 id 값 가져오기
function StateType(e) {
    type.value = e.target.id;
}

// push/replace state
function StoreState(e) {

    e.preventDefault();
    state++;
    var
        sObj = { "state": state, "message": msg.value },
        title = "title",
        url = "?state=" + state;
        
    //button click 의 id 값으로 구분처리 한다.
    if (type.value == "replace") {
        
        // replace 로 data 대체하기
        history.replaceState(sObj, title, url);
    }
    else {
        
        // push 로 새로운 object 의 state 저장하기
        history.pushState(sObj, title, url);
    }
    
    // 할당된 state 값 확인해 보기
    LogEvent(type.value + "State "+ state +": " + JSON.stringify(sObj));

}


//앞으로가기, 뒤로가기 누를 경우, event 처리
window.addEventListener("popstate", function(e) {

    // 할당된 state 값 확인해 보기
    LogEvent("Location: " + document.location + ", state: " + JSON.stringify(e.state))

});


// 콘솔 로그 찍어보기
function LogEvent(logmsg) {
    log.textContent += logmsg + "\n";
    var ot = log.scrollHeight - log.clientHeight;
    if (ot > 0) log.scrollTop = ot;
}
</script>