Ajax 뒤로가기 데이터 유지 - ajax dwilogagi deiteo yuji

그리고 게시글 제목을 눌러 detailView로 이동을 한다고 가정을 해보면 해당 title에는 아래와 같이 이벤트를 달아주었습니다. 해당 제목부분 클릭 시 현재 검색되었던 조건들이 sessionStorage에 해당 항목들이 저장이 되고 url에 설정된 링크로 넘어가게 됩니다.

이벤트를 $(”.title”).on('click',function(){...}. 가 아닌 $(document).on('click','.title'function(){...}로이벤트를 설정 한 이유는 해당 title은 검색을 하고 그려지는 영역이기 때문에 페이지를 로드하자마자 이벤트를 걸어주었습니다.

제목...

		...

이제 detailView에서 뒤로가기 이벤트가 발생되었는지 확인이 필요합니다. 그러기 위해서는 List에 아래와 같은 코드를 작성합니다.

onpageshow는 페이지가 로드되면 실행됩니다. 페이지가 로드되면 해당 페이지 로드 이벤트에 뒤로가기값이 true인지 확인을 합니다. 값이 확인되면 if문을 타면서 html의 각 검색항목 부분에 detailView를 누르기전의 정보를 담습니다. 그리고 검색 함수를 실행하며 list들을 보여줍니다. 그 이후에는 해당 sessionStorage를 clear하며 비워줍니다.

window.onpageshow = function(ev) {
	if(ev.persisted || (window.performace && window.performance.navigation.type ==2)){
		$("#searchType").val(sessionStorage.getItem("searchType"));
		$("#keyword").val(sessionStorage.getItem("keyword"));
		$("#pageNum").val(sessionStorage.getItem("pageNum"));
		$("#pageSize").val(sessionStorage.getItem("pageSize"));
		
		search();
	}
	sessionStorage.clear();
}

목록 버튼 누를 때

뒤로가기는 앞서 말한것과 같이 해결을 하였습니다. 그래서 목록 버튼도 window.history.back(); 을 달아서 뒤로가게 해야지 라는 생각을 할수도 있습니다. 하지만 프로젝트를 하다보면 detailView_1에서 의도치 않게 다른 detailView_2를 이동하는 경우가 있습니다.

이 때 목록 버튼을 단순 window.history.back(); 을 이용하여 구현하였다면 사용자가 목록버튼을 눌렀을 때 detailView_2에서 detailView_1로 이동하게됩니다. 그러면 어떻게해?!!

그러면 이제 방법은 목록버튼은 단순 list로 가는 링크를 연결해야 하지만 이 때 브라우저에게 “나 목록으로 돌아간다. 아까 검색한거 세팅해놔!” 라는 신호를 줘야합니다. 이 부분은 아래와 같이 구현하였습니다.

ajax를 사용해 화면을 전환하거나 페이지를 이동하는 경우

생각치 못했던 문제에 봉착했다

뒤로가기가 안된다는것!!!!!

사이트 내부를 이리저리 왔다갔다 하다 뒤로가기를 눌럿는데 바로 메인으로 점프 해버리는 상황이 발생한 것이다.

그렇다고 전부 갈아 엎어버릴수도 없고 이것저것 찾아보던 와중

해쉬뱅(hashbang) 이라는 것과 Pjax 라는 것을 발견했다

어떻게 사용해야 하는지 이리저리 블로그를 뒤져보고 스택오버플로우를 뒤져봐도

당췌 어떻게 사용해야 하는지 모르다가 클라이언트 쪽의 대리님의 도움으로 어느정도 감이 잡혔다.

그리고 나는 야매개발자 답게 제대로된 해쉬뱅이나 pjax방법을 사용하지 않고 꼼수를 부렸지만

해결은 했다 

먼저 해쉬뱅은 URL에 #! 을 붙여서 (앵커라고 하는것 같다) 사용 하는 방법인데 이해도 못하겠고

URL창이 지저분해 보여 패스하고 

history.pushState를 사용하는 방법을 이용했다.

전자의 경우 어느정도 브라우저에 자유로운 방법이고

후자는 익스플로러 10 이상 버전과 파폭 크롬에서만 동작 하는 방법이다

다행이도 클라이언트가 익스플로러는 최신 버전을 사용한다고 하여 마음 놓고 사용할 수 있었다.

방법은 간단하다!!!

history.pushState(데이터,타이틀,URL);

history.pushState를 사용하는 방법인데 

원래대로 라면 저기에 html데이터라든지 URL을 넣는다는지 하는 방법을 사용하지만

제대로된 사용법을 알기엔 경험과 능력이 미천하여 꼼수를 부렸다

저 히스토리에 데이터 라고 써있는 인자를 

var data = event.originalEvent.state;

이것으로 불러 올 수가 있는데 이 방법을 응용했다

일단 

페이지가 이동하는 이벤트에 

history.pushState(데이터,타이틀,URL); <- 데이터 부분에 Ajax로 요청하는 URL을 넣는다

그러면 페이지를 이동하는 이벤트가 발생할때마다 히스토리에 URL이 쌓이게 된다.

아래 펑션은 브라우져에서 뒤로가기나 앞으로 가기 이벤트가 발생했을때 실행되도록 하는 함수이다

$(window).bind("popstate", function(event) {

    var data = event.originalEvent.state;  // 이부분으로 뒤로가기 할때마다 아까 저장한 히스토리 스택에 쌓인 URL을 불러 온다

    if(data){ // 데이터가 있으면 해당 데이터를 ajax로 다시 요청해 화면에 뿌려준다!!!!

// 아래 코드는 필자가 켄도UI의 스플리터기능으로 화면을 뿌려주기에  작성한 것이다

// 다른 사람들은 각자 화면을 요청하는 AJAX펑션을 넣으면 되겠다.

    var splitter = $("#layout-vertical").data("kendoSplitter");

splitter.ajaxRequest("#article-pane",data);

    }

    else{

    // 히스토리에 정보가 없을경우 메인화면으로 보내준다.

    var url = "/메인화면";    

    $(location).attr('href',url);

    }

아주 간단하게 해결이 되었다!!!!

주의할점은 

if(data){ // 데이터가 있으면 해당 데이터를 ajax로 다시 요청해 화면에 뿌려준다!!!!

// 아래 코드는 필자가 켄도UI의 스플리터기능으로 화면을 뿌려주기에  작성한 것이다

// 다른 사람들은 각자 화면을 요청하는 AJAX펑션을 넣으면 되겠다.

     var splitter = $("#layout-vertical").data("kendoSplitter");

splitter.ajaxRequest("#article-pane",data);

    }

이부분에서 화면이동 하는 펑션으로 보내주는 경우 그 펑션엔

history.pushState(데이터,타이틀,URL);

이게 없어야 한다

이유는 뒤로가기를 했는데 거기다 또 히스토리에 뒤로가기한 URL을 저장해 버려 꼬이는 경우가 생기기 때문이다.

제 포스팅이 도움이 되었나요? 

그렇다면 공감하기 한번 눌러주세요 블로거에게 큰 힘이 됩니다

공유하기

게시글 관리

저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글