Session Storage를 이용한 뒤로 가기

J_Eddy·2022년 4월 7일
0

💡 프로젝트를 진행하면서 특정 목록(이하 List)을 조회하는 기능이 있습니다.

이 때 검색은 페이지 이동없는 ajax로 비동기식 방식으로 진행을 합니다.

목록중에 하나를 눌러 상세보기(이하 detailView)로 들어갈 수 있습니다.

해당 detailView로 들어가고 나서 다시 뒤로가기 혹은 목록버튼을 누르면 이전에 ajax로 검색했던 결과는 사라지게됩니다.

URL 변경 없이 검색을 한것이고 브라우저상에서 뒤로가기를 눌렀을 때 ajax를 실행하지 않고 단순 이전 html 페이지를 보여주기 때문입니다.

이러한 부분은 사용자 입장에서 너무 불편하다고 생각하여 Session Storage방식을 이용하여 구현하였습니다.

Session Storage란?

Session Storage란 브라우저상에 Session을 key,value 형태로 저장하는 방식 입니다.

적용

뒤로가기 이벤트

먼저 list에는 검색을 하는 함수가 있습니다.

function search(){

	var params = {
		searchType: $("#searchType").val(),
		keyword: $("#keyword").val(),
		pageNum: $("#pageNum").val(),
		pageSize: $("#pageSize").val()
	}

	$.ajax({
		type: 'GET',
		url: '/search',
		data: params,
		success: function(){
			...
		},
		error: function() {
			...
		}
	});
}

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

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

<a class='title' href='url..'>제목...</a>

		...
<script type="text/javascript">
	$(document).on('click','.title',function(){
		sessionStorage.setItem("searchType",$("#searchType").val();
		sessionStorage.setItem("keyword",$("#keyword").val();
		sessionStorage.setItem("pageNum",$("#pageNum").val();
		sessionStorage.setItem("pageSize",$("#pageSize").val();
	}
</script>

이제 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로 가는 링크를 연결해야 하지만 이 때 브라우저에게 “나 목록으로 돌아간다. 아까 검색한거 세팅해놔!” 라는 신호를 줘야합니다. 이 부분은 아래와 같이 구현하였습니다.

<button id="goListBtn" type="button">목록</button>

	...

<script type="text/javascript">
	$("#goListBtn").on('click',function(){
		sessionStorage.setItem('isGoList','Y');   //세션에 goList를 Y라고 세팅
		window.location.href = '/list';
	}
</script>

그리고 위에서 설정한 조건도 수정이 필요합니다. 아래와 같이 목록으로 불러서 왔는지 확인을 해주고 맞다면 로직을 수행하게됩니다.

window.onpageshow = function(ev) {
	**var isGoList = sessionStorage.getItem('isGoList');**
	if(ev.persisted || (window.performace && window.performance.navigation.type ==2)
			||**isGoList  =='Y'**){ //목록으로 돌아가기 버튼을 눌러서 왔는지 확인
		$("#searchType").val(sessionStorage.getItem("searchType"));
		$("#keyword").val(sessionStorage.getItem("keyword"));
		$("#pageNum").val(sessionStorage.getItem("pageNum"));
		$("#pageSize").val(sessionStorage.getItem("pageSize"));
		
		search();
	}
	sessionStorage.clear();
}

전체코드

List

<a class='title' href='url..'>제목...</a>

		...
<script type="text/javascript">

	function search(){
		var params = {
			searchType: $("#searchType").val(),
			keyword: $("#keyword").val(),
			pageNum: $("#pageNum").val(),
			pageSize: $("#pageSize").val()
		}
	
		$.ajax({
			type: 'GET',
			url: '/search',
			data: params,
			success: function(){
				...
			},
			error: function() {
				...
			}
		});
	}

	...

	$(document).on('click','.title',function(){
		sessionStorage.setItem("searchType",$("#searchType").val();
		sessionStorage.setItem("keyword",$("#keyword").val();
		sessionStorage.setItem("pageNum",$("#pageNum").val();
		sessionStorage.setItem("pageSize",$("#pageSize").val();
	}

	...

	window.onpageshow = function(ev) {
		var isGoList = sessionStorage.getItem('isGoList');
		if(ev.persisted || (window.performace && window.performance.navigation.type ==2)
				||isGoList  =='Y'){ //목록으로 돌아가기 버튼을 눌러서 왔는지 확인
			$("#searchType").val(sessionStorage.getItem("searchType"));
			$("#keyword").val(sessionStorage.getItem("keyword"));
			$("#pageNum").val(sessionStorage.getItem("pageNum"));
			$("#pageSize").val(sessionStorage.getItem("pageSize"));
			
			search();
		}
		sessionStorage.clear();
	}
</script>

DetailView

<button id="goListBtn" type="button">목록</button>

	...

<script type="text/javascript">
	$("#goListBtn").on('click',function(){
		sessionStorage.setItem('isGoList','Y');   //세션에 goList를 Y라고 세팅
		window.location.href = '/list';
	}
</script>
profile
논리적으로 사고하고 해결하는 것을 좋아하는 개발자입니다.

0개의 댓글