[JQUERY] 어떻게 어떤 형태의 데이터의 손실없이 현재 페이지를 다시로드?

어떻게 어떤 형태의 데이터의 손실없이 현재 페이지를 다시로드?

해결법

1. ---

   1.당신은 웹 저장, 색인화, WebSQL 같은 브라우저에서이 데이터를 저장하는 다양한 로컬 스토리지 메커니즘을 사용할 수 있습니다 (사용되지 않음)와 (IE와 UserData를) 파일 API (사용되지 않으며 크롬에서만 사용 가능).

   당신은 웹 저장, 색인화, WebSQL 같은 브라우저에서이 데이터를 저장하는 다양한 로컬 스토리지 메커니즘을 사용할 수 있습니다 (사용되지 않음)와 (IE와 UserData를) 파일 API (사용되지 않으며 크롬에서만 사용 가능).

   가장 간단하고 널리 지원 당신이 브라우저를 닫을 때까지 메모리에 (sessionStorage) 기반의 영구 저장소 (로컬 스토리지) 또는 세션이 WebStorage입니다. 둘 다 동일한 API를 공유 할 수 있습니다.

   페이지가 다시로드하려고 할 때 당신은 예를 들어 (간체) 수 같은 것을 할 :

   window.onbeforeunload = function() {
       localStorage.setItem("name", $('#inputName').val());
       localStorage.setItem("email", $('#inputEmail').val());
       localStorage.setItem("phone", $('#inputPhone').val());
       localStorage.setItem("subject", $('#inputSubject').val());
       localStorage.setItem("detail", $('#inputDetail').val());
       // ...
   }
   

   이 여기에서 작동 할 수 있도록 웹 저장소는 동 기적으로 작동합니다. 선택적으로 당신은 데이터가 입력 요소의 각 흐림 이벤트에 대한 데이터를 저장할 수 있습니다.

   페이지로드에서 확인할 수 있습니다 :

   window.onload = function() {
   
       var name = localStorage.getItem("name");
       if (name !== null) $('#inputName').val("name");
   
       // ...
   }
   

   데이터가 존재하지 않는 경우의 getItem의 NULL을 반환합니다.

   대신 로컬 스토리지의 사용 sessionStorage 당신은 임시 저장하려면.

2. ---

   2.나는 내 목적을 위해 작업에 K3N의 코드를 수정, 나는 sessionStorage 어떻게 작동 도움이 다른 사람에게 어떤 의견을 파악했다.

   나는 내 목적을 위해 작업에 K3N의 코드를 수정, 나는 sessionStorage 어떻게 작동 도움이 다른 사람에게 어떤 의견을 파악했다.

   <script>
       // Run on page load
       window.onload = function() {
   
           // If sessionStorage is storing default values (ex. name), exit the function and do not restore data
           if (sessionStorage.getItem('name') == "name") {
               return;
           }
   
           // If values are not blank, restore them to the fields
           var name = sessionStorage.getItem('name');
           if (name !== null) $('#inputName').val(name);
   
           var email = sessionStorage.getItem('email');
           if (email !== null) $('#inputEmail').val(email);
   
           var subject= sessionStorage.getItem('subject');
           if (subject!== null) $('#inputSubject').val(subject);
   
           var message= sessionStorage.getItem('message');
           if (message!== null) $('#inputMessage').val(message);
       }
   
       // Before refreshing the page, save the form data to sessionStorage
       window.onbeforeunload = function() {
           sessionStorage.setItem("name", $('#inputName').val());
           sessionStorage.setItem("email", $('#inputEmail').val());
           sessionStorage.setItem("subject", $('#inputSubject').val());
           sessionStorage.setItem("message", $('#inputMessage').val());
       }
   </script>
   

3. ---

   3.GitHub의에이를 찾습니다. 특히 그것을 위해 만들었습니다.

   GitHub의에이를 찾습니다. 특히 그것을 위해 만들었습니다.

   https://gist.github.com/zaus/4717416

4. ---

   4.이 대답은 나에게 매우 도움이되었다, 수동으로 각 필드를 거치지의 문제를 저장합니다

   이 대답은 나에게 매우 도움이되었다, 수동으로 각 필드를 거치지의 문제를 저장합니다

   jQuery를 사용하여 복잡한 형태의 상태를 저장하기

5. ---

   5.

   window.location.reload() // without passing true as argument
   

   나를 위해 작동합니다.

6. ---

   6.몇 가지 답변 언급으로, 로컬 스토리지는 좋은 옵션입니다 당신은 확실히 그것을 스스로 할 수 있지만 광택 옵션을 찾고 있다면,이라는 garlic.js을 수행 GitHub의에서 프로젝트가 이미 존재한다.

   몇 가지 답변 언급으로, 로컬 스토리지는 좋은 옵션입니다 당신은 확실히 그것을 스스로 할 수 있지만 광택 옵션을 찾고 있다면,이라는 garlic.js을 수행 GitHub의에서 프로젝트가 이미 존재한다.

7. ---

   7.나는 일반적으로 서버에 자동으로 내 자신의 양식을 제출하고 작성 인수와 함께 페이지를 다시로드합니다. 서버가받은 PARAMS와 자리 표시 자 인수를 교체합니다.

   나는 일반적으로 서버에 자동으로 내 자신의 양식을 제출하고 작성 인수와 함께 페이지를 다시로드합니다. 서버가받은 PARAMS와 자리 표시 자 인수를 교체합니다.

8. ---

   8.HTML5 로컬 저장소에 동의합니다. 이 예제 코드입니다

   HTML5 로컬 저장소에 동의합니다. 이 예제 코드입니다

9. ---

   9.당신은 데이터를 보존하지 않습니다 다시로드, 데이터 및 다시로드 페이지 (서버 측 데이터 형태로 렌더링)을 제출해야합니다. 그것은 당신의 브라우저는 수동 새로 고침에 폼 데이터 (브라우저에서 동일하지 않음) 캐싱 될 수있다.

   당신은 데이터를 보존하지 않습니다 다시로드, 데이터 및 다시로드 페이지 (서버 측 데이터 형태로 렌더링)을 제출해야합니다. 그것은 당신의 브라우저는 수동 새로 고침에 폼 데이터 (브라우저에서 동일하지 않음) 캐싱 될 수있다.

10. ---

    10.페이지를 새로 고침하기 전에 값을 저장하는 로컬 스토리지 (http://www.w3schools.com/html/html5_webstorage.asp)를 사용할 수 있습니다.

    페이지를 새로 고침하기 전에 값을 저장하는 로컬 스토리지 (http://www.w3schools.com/html/html5_webstorage.asp)를 사용할 수 있습니다.

11. ---

    11.당신은 로컬 / 세션 저장소에 값을 저장하여 내가 쓴 라이브러리, FormPersistence.js 핸들 양식 (드) 직렬화를 사용할 수 있습니다. 이 방법은 다른 답변에 링크 된 것과 유사하지만, jQuery를 필요로하지와 웹 스토리지에 일반 텍스트 암호를 저장하지 않습니다 않습니다.

    당신은 로컬 / 세션 저장소에 값을 저장하여 내가 쓴 라이브러리, FormPersistence.js 핸들 양식 (드) 직렬화를 사용할 수 있습니다. 이 방법은 다른 답변에 링크 된 것과 유사하지만, jQuery를 필요로하지와 웹 스토리지에 일반 텍스트 암호를 저장하지 않습니다 않습니다.

    let myForm = document.getElementById('my-form')
    FormPersistence.persist(myForm, true)
    

    로컬 스토리지 (거짓) 또는 세션 저장소 (true)를 사용할지, 각 FormPersistence 기능을 정의하는 선택적인 두번째 파라미터. 귀하의 경우, 세션 저장 가능성이 더 적합합니다.

    세 번째 매개 변수로 false를 전달하지 않는 한 기본적으로 양식 데이터는 제출시 스토리지에서 삭제됩니다. (예 요소를 삽입하는 등의) 특별한 값 처리 기능을 갖는 경우에는 제 매개 변수들을 전달할 수있다. 전체 문서에 대한 저장소를 참조하십시오.

12. ---

    12.의 keyup 이벤트에 대한 이벤트 리스너를 등록

    의 keyup 이벤트에 대한 이벤트 리스너를 등록

    document.getElementById("input").addEventListener("keyup", function(e){
      var someVarName = input.value;
      sessionStorage.setItem("someVarKey", someVarName);
      input.value = sessionStorage.getItem("someVarKey");
    });
    

from https://stackoverflow.com/questions/17591447/how-to-reload-current-page-without-losing-any-form-data by cc-by-sa and MIT license