동적으로 변경된 HTML을 뒤로 단추에 저장

동적으로 변경된 HTML을 뒤로 단추에 저장

놀랍습니다. 다른 사이트에서는 항상 이 기능이 작동하지만 현재 작업 중인 사이트에서는 작동하지 않습니다.

저는 ajax를 사용하여 새로운 콘텐츠를 가져옵니다.history.js와 History API에 대해 알고 있습니다.URL을 변경하고 싶지 않습니다.브라우저에서 새로운 HTML 콘텐츠를 캐시하도록 하면 사용자가 페이지를 떠나 다시 버튼을 사용하여 돌아오면 업데이트된 HTML이 유지됩니다.

다른 사이트에서는 URL을 변경하거나 해시 번호를 사용하지 않고 항상 동작합니다.
작동시키기 위한 요령이 있나요, 아니면 브라우저에 의해 무작위로 결정되는 건가요?
URL을 사용하여 이 정보를 입수하고 싶지 않은 경우, 대체 방법이 있습니까?

지금까지 약 15년 동안 저는 고통스러운 시행착오를 겪으며 발견한 두 가지 방법을 사용해 왔습니다.입력 필드 값(특히 '숨긴' 필드 값)은 URL - AND와 함께 브라우저 이력에 저장됩니다. onLoad 이벤트는 뒤로(또는 앞으로) 버튼으로 페이지로 돌아가면 호출됩니다.

즉, 숨김 필드(양식으로 저장)에 원하는 만큼 '상태'를 저장하고 'onLoad'에서 변경 사항을 '다시 저장'할 수 있습니다.렌더 파트는 보통 따로 만들어서...즉, 동적성이 발생할 때 먼저 숨겨진 필드에 쓴 다음 렌더링 함수를 호출합니다.그런 다음 다양한 동적 비트에 대한 모든 렌더링 함수를 모아서 onLoad에서 호출합니다.

저는 이것을 어떠한 매뉴얼에서도 찾아본 적이 없기 때문에, 어떠한 보증도 할 수 없다고 강조하고 싶습니다만, (Netscape 이후) 꽤 오랫동안 안정적으로 사용하고 있습니다.많은 브라우저(IE, Chrome, FF 등)에서 동작하지만, 그 외의 브라우저는 시도해 본 적이 없습니다.

만약 누군가가 더 '맞고' 덜 지루한' 방법을 가지고 있다면, 나로서는 그것에 대해 듣는 것이 매우 기쁠 것이다.하지만 이게 효과가 있는 것 같아.

RES 작성자가 /r/javascript에서 질문을 찾았습니다.

파이어폭스는 최근 이 기능을 자체 추가했지만 브라우저가 이 기능을 제공하지 않는 경우에는 이 기능을 "좋은" 방법으로 사용할 수 없습니다.

RES는 #page=n 마커를 추가하고 여기서 n은 페이지 번호입니다.이렇게 하면 페이지 로드에서 RES는 이미 위치가 있는 경우 Back 버튼에서 온 것이 틀림없다는 것을 알 수 있습니다.hash -- 불행히도 이 특정 동작은 find를 다른 페이지(페이지 = n+1)로 스크롤할 때 Firefox와 Chrome 모두에서 ctrl-f find를 불러와 사용자를 짜증나게 합니다.

그래서 RES는 보기 흉하고 불완전한 체조를 하고 뒤로 버튼을 통해 페이지에 도착했는지 여부를 추측합니다.새 페이지를 로드할 때마다 해당 번호가 sessionStorage(localStorage 등이지만 탭에는 로컬)에 저장되며, 뒤로 버튼을 통해 나타나면 해당 페이지 번호에 대한 요청이 실행됩니다.

단, 최근 FF와 Chrome에서 테스트한 결과 해시 변경으로 인해 ctrl+f 검색 대화상자가 "취소"되지 않는 것 같으므로 그것을 사용하는 것이 좋습니다.페이지 로드 시 해시가 있는 경우 해당 해시에 의해 결정된 관련 데이터를 로드합니다.

실제 HTML 콘텐츠를 localStorage에 저장하고 뒤로 버튼을 사용하여 페이지 로드에 다시 로드할 수도 있습니다.이것이 가장 효율적인 방법은 아닐 수 있으며, DOM에 의존하는 Javascript와 충돌할 수 있으므로 주의하시기 바랍니다.

「최적의」솔루션은, 실제로, 사이트의 동작이나 그 컨텐츠의 외관에 의해서 다릅니다.

History.js를 사용하면 다음과 같이 목표를 달성할 수 있습니다.

function manageHistory(data){

    var History = window.History;
    if ( !History.enabled ) { return false; }        
    History.replaceState({myData: data}, null);
}

$('select.select').change(function(e) { // I am using select tag here to give an example of an HTML action triggerer

    e.preventDefault(); 

    // get data from your select tag

    manageHistory( data)


});

History.Adapter.bind(window, 'statechange', function() { 
    var State = History.getState();

    // Launch the ajax call and update DOM using State.data.myData
});

Mozilla 사이트의 History에 대한 설명서에 따르면 PushState의 세 번째 매개 변수는 다음과 같습니다.

URL : ........이 매개변수는 선택사항이며, 지정되지 않은 경우 문서의 현재 URL로 설정됩니다.

다른 웹 페이지가 세션을 제공하는 백엔드 서버를 사용하고 있기 때문일 수 있습니다.

정적 html/js 페이지를 작성하는 경우 이러한 세션은 없으며 페이지가 새로고침될 뿐입니다.

원하는 것을 얻기 위해 쿠키를 사용할 수 있습니다.

로컬 스토리지와 서버 측 지속성도 한 가지 방법입니다.

클라이언트 측에서 HTML을 편집/작성/일부 속성이 변경될 경우 Restful api(또는 이와 유사한 API)를 통해 웹 스토리지 또는 데이터베이스와 페이지 상태 변경을 동기화해야 합니다.

페이지로 돌아가면 - 페이지가 로컬 스토리지에서 저장된 정보를 검색할 수 있습니다.서버측 지속성을 사용하는 경우 세션 쿠키와 함께 사용하여 사용자의 상태 변경을 검색해야 합니다. 이 변경사항은 서버에서 로드될 수 있습니다.

언급URL : https://stackoverflow.com/questions/16431164/preserve-dynamically-changed-html-on-back-button