Jquery ajax 뒤로가기 (ajax 브라우저 뒤로가기)

 

SPA 기술이 보편화된 요즘에 Jquery나 순수 바닐라 스크립트는 잘 쓰이지는 않는다고 합니다.

그러나 관공서 프로젝트, 이미 구축된 기업들의 프로젝트를 유지보수, 개선하는 경우에는 거의 대부분 Jquery로 되어있는 경우가 많습니다.

 

데이터를 동적으로 가져오기 위해서는 대표적인 함수인 Ajax(에이작스, 아작스)를 사용 합니다.

간혹 아래와 같은 경우를 만나면 "버그" 라고 불리는 것을 종종 들을 수 있습니다.

1. 어떤 페이지에서 ajax를 활용해 데이터를 동적으로 바꾼뒤 다른 페이지로 이동 합니다.
2. 뒤로가기를 하면 브라우저에서 마지막으로 동적으로 바뀐 데이터가 나오는게 아니라 
   처음 접근할때 보았던 데이터가 보입니다.

 

"뒤로가기" 라는 기능은 브라우저가 이전 페이지로 돌아가는 것을 의미 합니다.( history.back() )

이전 페이지로 가게되면 당연히 이전에 있었던 데이터만 표출합니다.

에이작스로 동적으로 만든 데이터와 행위는 따로 기록을 하지 않기 때문입니다.

 

이러한 경우를 대비하기 위해서는 샵(#) 기호를 활용하여 사용자의 url을 변경한 뒤에 해당 데이터유무에 따라서 뒤로가기 행동을 다시 해 주면 됩니다.

function move(){
    //....요 위에서 ajax로 뭔가 했다고 가정 합니다.

    let hashUrl = '';
    if(document.URL.indexOf('#') > -1){
        let url = document.URL.substring(0, document.URL.indexOf('#'))
        hashUrl = url + '#'+ '에이작스로 한행동추가';
    } else {
        hashUrl = document.URL += '#' + '에이작스로 한행동추가';
    }
    window.location.replace(hashUrl);
}

 

ajax를 실행하는 move라는 함수가 있다고 가정 합니다.

그러면 이러한 함수가 실행 될 때 마다 사용자의 주소(url)에 샵(#, 앵커)을 붙여준 뒤에 에이작스로 한 행동을 기록하여 줍니다.

이렇게 기록이 된 페이지는 다른페이지로 이동하였다 하더라도 데이터가 남아 있습니다.

 

예제) http:127.0.0.1/member#page=1_page=2_page=3

 

위 예제는 사용자가 페이지 3개를 넘겨본 경우를 예로들어 보았습니다.

에이작스로 한 행동을 잘 정의해서 위 예제처럼 계속해서 붙여준 다면 사용자가 다른페이지로 이동하였다가 뒤로가기를 한경우 URL값을 확인하여 해당 행동을 다시 하도록 정의하면 됩니다.

let page_history = document.URL.substring(document.URL.indexOf('#')+1);
let historyData = page_history.split('_');  //이런식으로 사용 할 수 있겠네요!

 

 

이상으로 ajax 뒤로가기 (ajax 브라우저 뒤로가기) 문제 방지에 대해서 살펴보았습니다.

궁금한점 또는 틀린부분은 언제든 연락주세요! 👻