브라우저의 뒤로 버튼을 클릭하면 페이지 상태를 유지하는 방법은 무엇입니까?

Question

클라이언트 측 페이지 매김 및 필터가있는 페이지가 있습니다. 이 페이지는 약 200-300 개의 제품을 나열합니다. 페이지에 카테고리, 제조업체 및 무게와 같은 일부 필터가 포함되어 있습니다. 페이지 번호 나 필터 중 하나를 클릭하면 Jquery를 사용하여 클라이언트 측 페이지 컨텐트를 관리하고 있습니다.

이 단계까지는 모든 것이 잘 작동합니다. 이제 나는 문제를 직면하고있는 유스 케이스가있다.

1. 사용자가 Google 제품 목록 페이지로 이동하여 일부 필터를 클릭하고 제품 목록을 가져옵니다.
2. 이제 특정 제품을 클릭하면 제품 페이지로 리디렉션되어 제품의 세부 정보를 볼 수 있습니다.
3. 하지만 이제 사용자가 뒤로 버튼을 클릭하면 필터를 선택하지 않고 초기 상태 페이지를 가져옵니다.

뒤로 버튼을 클릭 할 때 이전에 선택한 필터로 페이지를 가져 오는 방법이 있습니까?

Answer 1

다음 중 일부를 사용하여 여러 페이지에 데이터를 저장할 수 있습니다.

1. 데이터를 cookies에 저장하십시오.
2. 데이터를 local storage에 저장하십시오.
3. 데이터를 서버의 session에 저장하십시오.
4. URL의 데이터 부분을 만드십시오 (필터 매개 변수로는 hash 또는 query string을 사용하십시오). 쿼리 문자열을 변경하면 페이지가 다시로드됩니다.

쿠키, 로컬 저장소 또는 해시를 사용하는 경우 페이지로드시 저장된 데이터를로드하고 적용하는 자바 스크립트 코드를 페이지에 추가해야합니다.

Answer 2

이 작업을 수행하는 여러 가지 방법이 있습니다 :

1. 당신은 다음 페이지를 다시로드하지 않는, HTML5의 역사와 단일 페이지 응용 프로그램을 처리하는 경우. 그러나 귀하의 질문에 따라, 나는 이것이 귀하가 상대하고있는 것이 아니라고 가정합니다.
2. URL에 내용을 저장하십시오. 예를 들어, TotalHockey의 필터를 살펴보십시오. http://www.totalhockey.com/Search.aspx?category_2=Sticks%2fComposite%20Sticks&chan_id=1&div_main_desc=Intermediate&category_1=Sticks 그러면 뒤로 가면 URL에 전체 상태가 포함됩니다.
3. 지원하는 브라우저가있는 경우 localstorage를 사용하십시오.
4. 쿠키를 $ .cookie API와 함께 사용하십시오.
5. 서버의 세션에 저장하십시오.

Answer 3

필터 입력 및 각 Ajax 요청 (제품 목록로드)에 제출 한 직후 검색 필터 데이터를 세션에 저장할 수 있습니다. 세션에 저장된 검색 필터 입력을 확인하고 그들에게. 검색 세션이 비어 있으면 전체 목록을 표시합니다.

레코드를 검색 한 후 세션에서 전체 Ajax 요청 URL (GET 메소드가 사용 된 경우)을 저장하고 제품 세부 정보 페이지에서 다시 나온 후 해당 URL을 다시 누를 수도 있습니다.