데이터 유실을 경고하는 모범 사례

Question

많은 JavaScript (주로 jQuery)를 사용하는 사이트가 있으며 멀리에서 이동할 때 저장되지 않은 변경 사항을 잃게된다는 것을 사용자에게 알리는 멋진 글로벌 방식이 필요합니다. 특정 페이지.

현재 입력에 onchange 이벤트가 있고 클릭하면 경고가 표시되는 기능에 내 탐색 기능이 포함됩니다.

이 정말 어설픈 느낌이 잘 조절되지 않는 당신은 onbeforeunload 이벤트를 찾고 있습니다

Answer 1

내 입력에 onchange 이벤트가 있고 변경 될 때 isDirty 변수를 true로 설정합니다.

그럼 내가 저장되지 않은 변경 사항에 대해 사용자에게 경고하는 onbeforeunload 이벤트를 사용 :

var isDirty = false; 

window.onbeforeunload = function (evt) { 
    if (isDirty) { 
     return 'If you continue your changes will not be saved.'; 
    } 
} 

Answer 2

(기본 탐색의 일부가 아닌 탐색 수동으로까지 이상적이다, 포장해야합니다).

$(window).bind('beforeunload', function(){ 
    return "Are you really sure?"; 
}); 

네이티브 같은 : 물론 단지 "예방 방법"입니다

window.onbeforeunload = function(){ 
    return "Are you really sure?"; 
}); 

있다. 사이트에 변경 사항이 있는지 여부를 알기 위해서는 여전히 어떤 논리가 필요합니다. 예를 들어 boolean을 사용하면 쉽게 수행 할 수 있습니다. 또한 당신은

if('onbeforeunload' in window){} 

나는 모든 주요 브라우저가 현재 이벤트를 지원 생각처럼 빠른 검색을해야하지만, 그 사건을 모르는 브라우저가 아직 없습니다. 따라서 위의 조건이 실패하면 다른 방법으로 우아하게 대체 할 수 있습니다.

Answer 3

on unload 창 이벤트에서 페이지를 변경할시기를 잡으십시오. 그런 다음 저장되지 않은 데이터를 탐색 할 때 사용자에게 경고하는 라이트 박스 경고를 표시합니다.