pushState : 상태 객체는 정확히 무엇입니까?

pushState : 상태 객체는 정확히 무엇입니까?

---

이제 상태 개체가 여러 키 | 값 쌍으로 존재할 수 있고 새 기록 항목과 연결되어 있다는 사실을 여러 번 읽었습니다. 그러나 누군가가 상태 객체의 이점에 대한 예를 들어 줄 수 있습니까? 그것의 실제 사용은 무엇입니까? {}를 입력하지 않는 이유를 상상할 수 없습니다.

---

이 작은 예제를 보자 : run fiddle ( editor view ) :

사용자가 색상을 선택할 수있는 페이지가 있습니다. 매번 새로운 내역 항목을 생성합니다.

function doPushState(color) {
    var state = {},
        title = "Page title",
        path  = "/" + color;

    history.pushState(state, title, path);
};

지금은 상태 개체를 비워두고 URL을 색상 이름으로 설정합니다 (페이지를 다시로드하지 마십시오. 해당 URL이 존재하지 않으므로 404가 표시됩니다).

이제 빨간색, 녹색 및 파란색을 각각 한 번씩 클릭하십시오. URL이 변경됩니다. 이제 뒤로 버튼을 클릭하면 어떻게 되나요?

브라우저는 실제로 기록으로 돌아가지만 페이지는이를 인식하지 못합니다. URL은 '/ blue'에서 '/ green'으로 다시 변경되지만 페이지는 'You have selected blue'로 유지됩니다. 페이지가 URL과 동기화되지 않았습니다.

이것은 무엇 window.onpopstate이벤트와 상태 개체가 있습니다 :

1. 선택한 색상을 상태 객체에 포함합니다.

   function doPushState(color) {
       var state = { selectedColor: color },
           title = "Page title",
           path  = "/" + color;
   
       history.pushState(state, title, path);
   };
   

2. 그런 다음 popstate이벤트를 수신 하여 선택한 색상을 업데이트해야하는시기를 알 수 있습니다 (jQuery에서).

   $(window).on('popstate', function(event) {
       var state = event.originalEvent.state;
   
       if (state) {
           selectColor( state.selectedColor );
       }
   });
   

업데이트 된 예제 : run fiddle ( editor view ) : 사용자가 기록을 다시 탐색 할 때 그에 따라 페이지가 업데이트됩니다.

---

특정하고 미래 지향적 인 사용 사례로, 뷰에서 지역적으로 분할 된 사용자 지정 요소 및 템플릿을 사용하여 프로그레시브 앱에서 사용자 뷰 및 데이터 상태를 유지 관리합니다.

64 개의 상자 격자를 여러분의 관점으로 상상해보십시오. 큰 화면에서 상자는 조각 당 147 ^ 2입니다.

URL은 64 / 사용자 ID abs 관련 사용자 데이터를 나타냅니다.

그런 다음 웹 앱은 그리드를 사용자 별 상태 데이터로 채울 수 있습니다.

이 사용 사례에서 내가 완전히 미래라고 믿고있는 사용자는 자신의 개인 상태와 데이터로 채워진 뷰 부분을 공유하고 싶지 않을 것입니다.

이전 기록 상태 및 관련 650k 데이터 사용

잘 알려진 몇 가지 정렬 방식을 사용하여 상태를 포함하여 브라우저 기록 및 위치에서 전체적이고 복잡한 앱을 재구성 할 수 있습니다.

춥다

---

가장 눈에 띄는 예는 나는을 위해 볼 수 있습니다 pushState, replaceState그리고 window.onpopstate사이트에 대한 아약스 탐색이다.

귀하의 사이트 또는 웹 앱이 nav& footer.. 수정 되었다고 가정 해보십시오 . 그러면 새 페이지의 콘텐츠를 특정 컨테이너에로드 할 수 있습니다 (예 : 새 <main>요소).

페이지를 다시로드하고 싶지 않고 새 페이지에서 필요한 것을로드하기 만하면됩니다.

이 pushState방법을 사용 하면 페이지를 다시로드하지 않아도 브라우저 Back와 Forward버튼을 사용하여 탐색 할 수 있습니다.

멋지죠?

에서 MDN :

HTML5는 history.pushState () 및 history.replaceState () 메서드를 도입하여 각각 기록 항목을 추가하고 수정할 수 있습니다. 이러한 메서드는 window.onpopstate 이벤트와 함께 작동합니다.

Using history.pushState() changes the referrer that gets used in the HTTP header for XMLHttpRequest objects created after you change the state. The referrer will be the URL of the document whose window is this at the time of creation of the XMLHttpRequest object.

Example

There's a great example on MDN here, and the relevant Git repo here.

ReferenceURL : https://stackoverflow.com/questions/17612307/pushstate-what-exactly-is-the-state-object-for