[javascript/jquery] jquery ajax html history back example / jquery ajax html 더보기 뒤로가기시 유지방법

[javascript/jquery] jquery ajax html history back example / jquery ajax html 더보기 뒤로가기시 유지방법

 

 

jquery ajax html을 이용하여

 

더보기를 구현하다보면

 

게시물을 클릭해서 상세 페이지로 갔다가

 

뒤로가기 버튼을 이용해서

 

목록으로 되돌아오면, 더보기 목록이 유지되야 하는 경우가 있습니다.

 

그럴때는 아래와 같이 history state 를 이용하시면 됩니다.

 

 

우선 아래와 같이 total_list 이라는 변수를 선언합니다.

    var total_list = "";

 

아래와 같이 ajax html 함수에서

 

append 시키는 부분에 

 

total_list 에 리턴받은 html 데이터를 누적하고,

 

history.replaceState 에 total_list 와 카운트를 저장하고 현재 url 명에 ## 개를 추가해서 

 

맨마지막 인자로 추가합니다.

 

$.ajax({
    type: "POST",
    url: url,
    data: DATA,
    success:function(data) {
        $("#TARGET").append(data);
        total_list += data;
        history.replaceState({list:total_list, count:cnt},'', '/notice##');
        doubleSubmitFlag = false;
    },
    error:function(r) {
        //alert(r.status);
    },
    dataType: "html"
});

 

그리고 아래와 같이

 

스크립트를 하나 추가합니다.

 

location.hash 즉 url에 ## 이 포함되어 있으면

 

뒤로가기를 이용해서 온것으로 보고 

 

history.state 에 담겨있던 html 을 TARGET 에 뿌려주는 역할을 합니다!

 

if(location.hash){
    var data = history.state;
    if(data){
        $('#TARGET').append(data.list);   //저장된 데이터를 뿌려준다.
    }
}

 

참고들 하세요!