•  06-09-2019
  •  | 
  •  

문제

자동 저장 기능을 구현한 최고의 자바스크립트 라이브러리, 플러그인 또는 라이브러리 확장은 무엇입니까?

구체적인 요구 사항은 데이터 그리드를 '저장'할 수 있어야 한다는 것입니다.Gmail과 Google 문서의 자동 저장을 생각해 보세요.

이미 발명된 바퀴라면 다시 만들고 싶지 않습니다.나는 마법의 autoSave() 함수의 기존 구현을 찾고 있습니다.

자동 저장: 영구 저장소(일반적으로 DB)에 저장하는 서버 코드로 푸시합니다.서버 코드 프레임워크는 이 질문의 범위를 벗어납니다.

나는 Ajax 라이브러리를 찾고 있는 것이 아니라 더 높은 수준의 라이브러리/프레임워크를 찾고 있습니다.양식 자체와 상호 작용합니다.

daemach는 jQuery @ 위에 구현을 도입했습니다. http://daemach.blogspot.de/2007/03/autosave-jquery-plugin.html [스크립트 호스트 다운].하지만 그것이 가볍고 잘 설계된 기준을 충족한다고 확신하지는 않습니다.

기준

  • 안정적이고 가벼우며 잘 설계되었습니다.
  • onChange 및/또는 onBlur를 저장합니다.
  • 지정된 밀리초보다 더 자주 저장하지 않습니다.
  • 동시에 발생하는 여러 업데이트를 처리합니다.
  • 마지막 저장 이후 변경 사항이 발생하지 않은 경우 저장하지 않습니다.
  • 입력 클래스별로 다른 URL에 저장
도움이 되었습니까?

해결책

자동 저장은 구현이 매우 간단해야 하며 jquery 또는 mootools와 같은 주요 프레임워크 중 하나를 사용할 수 있습니다.사용자가 자동 ​​저장해야 하는 항목을 편집한 후 window.setTimeout()을 사용하고 해당 시간 제한이 javascript 프레임워크 표준 AJAX 항목을 호출하도록 하기만 하면 됩니다.

예를 들어(jquery 사용):

var autosaveOn = false;
function myAutosavedTextbox_onTextChanged()
{
    if (!autosaveOn)
    {
        autosaveOn = true;

        $('#myAutosavedTextbox').everyTime("300000", function(){
             $.ajax({
                 type: "POST",
                 url: "autosavecallbackurl",
                 data: "id=1",
                 success: function(msg) {
                     $('#autosavenotify').text(msg);
                 }
             });
        }); //closing tag
    }
}

다른 팁

나는이 질문이 오래되었음을 알고 있지만, 내가 가장 좋아하는 코드를 포함하고 싶습니다. 여기서 찾았습니다.http://codetunnel.io/how-to-implement-autosave-in-your-web-app/

코드는 다음과 같습니다.

var $status = $('#status'),
    $commentBox = $('#commentBox'),
    timeoutId;

$commentBox.keypress(function () { // or keyup to detect backspaces
    $status.attr('class', 'pending').text('changes pending');

    // If a timer was already started, clear it.
    if (timeoutId) clearTimeout(timeoutId);

    // Set timer that will save comment when it fires.
    timeoutId = setTimeout(function () {
        // Make ajax call to save data.
        $status.attr('class', 'saved').text('changes saved');
    }, 750);
});

사용자가 750 밀리 초 이상의 글쓰기를 중단 한 후에 저장됩니다.

또한 변경 사항이 저장되었는지 여부를 알리는 상태가 있습니다.

타임 아웃을 사용하여 설정 시간을 절약 할 수 있지만 더 나은 방법은 일종의 OnChange 이벤트 처리기를 갖는 것일 수 있습니다. 따라서 데이터가 변경되면 설정된 시간 내에 저장되지 않은 경우 데이터가 변경되면 시간이 변경되는 것입니다. 저장하지만 모든 키 스트로크를 저장하지 마십시오.

따라서 Ajax 기능을 호출하기 전에 마지막으로 저장 한시기를 보게됩니다.

이렇게하면 필요할 때만 저장할 수 있지만 사전 결정된 속도로 저장할 수 있습니다. 따라서 5 분마다 절약하려면 변경 사항에 관계없이 5 분 내내 변경되면 저장하십시오.

Ajax 호출을하는 것은 사소하지만 jQuery는 그것을 단순화 할 수 있습니다. 불행히도, 내가 본 것을 얻으려면 내가 본 것에서 자신의 기능을 구현하면됩니다. 특정 필드 만 변경되면 다른 사람들이 저장하기를 원할 수 있으므로 일반적인 방식으로하기가 어렵습니다. 따라서 선택 상자를 클릭하면 저장 기능이 발생하지 않지만 텍스트 상자에서 무언가를 변경할 수 있습니다.

쿠키의 형태 필드의 간단한 자동 저장 용은이 훌륭한 플러그인을 사용합니다. http://rikrikrik.com/jquery/autosave/데이터를 서버로 보내지 않지만 더 나은 것을 찾지 못하면 처음부터 수행하는 것보다 기능적으로 업그레이드하는 것이 더 쉽습니다.

jQuery를 사용하는 것이 좋습니다.물론 "저장" 부분은 여전히 ​​백엔드에서 수행되어야 하지만 jQuery를 사용하면 AJAX 요청을 쉽게 제출할 수 있습니다.

ASP.NET 백엔드가 있는 경우 간단히 WebMethod를 호출하고 지정된 간격으로 관련 문자열(텍스트 상자의 내용 등)을 제출할 수 있습니다.

[WebMethod]
public void AutoSave(String autoSaveContent)
{
 // Save
}

이 메서드를 호출하기 위한 jQuery 요청은 다음과 같습니다.

$.ajax({  
type: "POST",  
contentType: "application/json; charset=utf-8",  
url: "AutoSaveService.asmx/AutoSave", 
data: "{textBoxToAutosaveText}",  
dataType: "json"
});

그게 다야.jQuery는 다음에서 찾을 수 있습니다. http://jquery.com/ .

x 초마다 발사되는 타이머가 필요하지 않습니까? 콜백 함수는 "autoSave = true"필드가 추가 된 양식 서버에 대한 Ajax 포스트 백을 수행합니다. 서버 에서이 포스트백을 처리하면 완료됩니다.

동기화 a jQuery 플러그인 이는 HTML 페이지에 기능을 추가하여 정기적으로 사용자 입력을 서버로 다시 보냅니다. (소스 코드)

자바 스크립트 및 HTML 샘플 :

<script>
  $("input").synchronize();
</script>

<input type="text" value="initial_value" 
       class="{url:'/entity.cfc?method=updateDescription',data:{ID1:'1',ID2:'2'}}" />

기본 기본 지연 1 초 후 AJAX 요청 결과 :

http://localhost/entity.cfc?method=updateDescription&value=update_value&preVal=initial_value&ID1=1&ID2=2

간단하고 경량을 찾고 있다면 가장 경량이 JavaScript의 내장을 사용하는 것입니다. setTimeout() 기능. Ajax를위한 프레임 워크 선택과 함께 사용하면 좋습니다.

function autoSave()
{
  $.get(URL, DATA); // Use any AJAX code here for the actual autosaving. This is lightweight jQuery.
  setTimeout("autoSave()", 60000); // Autosaves every minute.
}
autoSave(); // Initiate the auto-saving.
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top