hashHandler()

네이버는 웹도 앱도 뒤로가기 하면 검색했던거 다 나오는데, 쿠팡같은거는 뒤로가기 누르면 그냥 곧바로 홈으로 간다 했던거 있죠?

 

function hashHandler() {
  var hash = (location.hash // '#cool-feature'
  
  var commands = hash.split("&");
  if (commands["action"] == "search") $.ajax(~~);
  if (commands["action"] == "view") $.ajax(~~);
}

window.addEventListener('hashchange', hashHandler, false);

요런 식으로 개발해두고.. 검색할때 해시값만 변경하게 하면 ... 앞으로가기 뒤로가기 처리가 됨니다.
검색버튼 누르면 location.href="#action=search&keyword=우왕굳";
이렇게 하면 화면 리프레시 없이 해시만 바뀌거든요. 해시 바뀌면 저 위에 이벤트리스너가 이벤트 잡아서... "#action=search&keyword=우왕굳" 요고를 파싱해다가 ajax호출하게 함니다. 그럼 화면은 비동기방식으로 바뀌는거져.
back버튼 누르면 #action=search&keyword=이액티브짜증나 로 바뀔테고 그럼 ajax서치가 또 "이액티브짜증나" 로 검색을 해서 비동기방식으로 검색결과가 또 바뀌는 그런 방식이 됨니다

 

즉, 페이지 이동은 hashHandler함수로 이용하고 실제 데이터는 비동기로 받는다. hash바뀔때마다 url은 변경되고 결국 브라우저 페이지에 쌓이니까..