[JQUERY] 페이지가로드 사이의 변수를 지속

페이지가로드 사이의 변수를 지속

해결법

1. ---

   1.HTTP가 상태이기 때문에, 때마다 당신은 당신이 자바 스크립트에서 설정 한대로의 초기 값을 사용하는 페이지를로드합니다. 당신은 JS에서 전역 변수를 설정하고 단순히 페이지를 다시로드 한 후 그 값에 숙박 할 수 없습니다.

   HTTP가 상태이기 때문에, 때마다 당신은 당신이 자바 스크립트에서 설정 한대로의 초기 값을 사용하는 페이지를로드합니다. 당신은 JS에서 전역 변수를 설정하고 단순히 페이지를 다시로드 한 후 그 값에 숙박 할 수 없습니다.

   자바 스크립트를 사용하여로드를 초기화 할 수 있도록 다른 곳에서 값을 저장할 수있는 몇 가지 방법이 있습니다

   쿼리 문자열

   GET 메소드를 사용하여 양식을 제출하면 URL은 쿼리 문자열 (? 매개 변수 = 값 뭔가 = 42)와 함께 업데이트됩니다. 당신은 특정 값에 양식에 입력 필드를 설정하여이를 활용할 수 있습니다. 이 간단한 예가 될 것입니다 :

   <form method="GET">
       <input type="hidden" name="clicked" value="true" />
       <input type="submit" />
   </form>
   

   페이지의 초기로드에서 더 쿼리 문자열이 설정되지 않습니다. 이 양식을 제출하면, 입력의 이름과 값 조합은 클릭 = 사실로 쿼리 문자열에 전달됩니다. 버튼을 클릭 한 경우 페이지가로드 다시 쿼리 문자열을 확인할 수 있습니다 그래서.

   이 데이터를 읽으려면 페이지로드에서 다음 스크립트를 사용할 수 있습니다 :

   function getParameterByName(name) {
       name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
       var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
           results = regex.exec(location.search);
       return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
   }
   
   var clicked = getParameterByName('clicked');
   

   (출처)

   이것을 사용하는 기능은 양식이 현재 어떻게 작동하는지 이미 POST를 사용하는 경우, 다음이 문제가 될 수에 따라 달라집니다.

   또한, 더 큰 데이터 세트의 이것은 최적 이하이다. 문자열 주위에 전달하면 큰 문제가 아니지만 배열과 데이터의 개체에 대한 당신은 아마 웹 저장소 나 쿠키를 사용합니다. 세부 브라우저에서 약간의 차이가 있지만, URI의 길이에 대한 실질적인 제한은 약 2,000 자입니다

   웹 저장소

   HTML5의 도입으로 우리는 또한 페이지가로드에서 브라우저에 정보를 저장할 수 있습니다 웹 저장소를 얻었다. 로컬 스토리지는 (사용자가 수동으로 삭제하지 않는 한) 만 현재 검색 세션 동안 데이터를 저장 sessionStorage 더 긴 기간에 대한 데이터를 저장할 수있다. 사용자가 나중에 다시 올 때 true로 설정 '를 클릭 "계속 싶지 않기 때문에 후자는 여기에 유용합니다.

   여기에 버튼 클릭 이벤트에 스토리지를 설정,하지만 당신은 또한 제출하거나 다른 어떤 형성을 결합 할 수있다.

   $('input[type="submit"][value="Search"]').click(function() {
       sessionStorage.setItem('clicked', 'true');
   });
   

   페이지를로드 할 때의 설정이를 사용하는 경우 다음, 당신은 확인할 수 있습니다 :

   var clicked = sessionStorage.getItem('clicked');
   

   이 값 만이 브라우징 세션 동안 저장하더라도, 당신은 이전을 재설정 할 수 수 있습니다. 이렇게하려면 사용 :

   sessionStorage.removeItem('clicked');
   

   당신은 JS 객체 또는 배열을 저장하고 싶을 경우에 당신은 문자열로 그것을 변환해야합니다. 사양에 따라 다른 데이터 유형을 저장 할 수 있어야하지만,이 올바르게 아직 브라우저에서 구현되지 않습니다.

   //set
   localStorage.setItem('myObject', JSON.stringify(myObject));
   
   //get
   var myObject = JSON.parse(localStorage.getItem('myObject'));
   

   당신은 정말 오래된 / 모호한 브라우저를 지원해야하지 않는 한이를 사용하는 것이 안전합니다 있도록 브라우저 지원은 매우 중대하다. 웹 저장소는 미래입니다.

   쿠키

   웹 저장소에 대한 대안은 쿠키에 데이터를 저장한다. 쿠키는 주로 데이터 서버 쪽에서 판독하게되지만,뿐만 아니라 순수 클라이언트 측 데이터에 사용될 수있다.

   당신은 이미 아주 쉽게 쿠키를 설정하게 jQuery를 사용합니다. 다시 말하지만, 나는 여기에 클릭 이벤트를 사용하지만 사용되는 어느 곳이 될 수 있습니다.

   $('input[type="submit"][value="Search"]').click(function() {
       $.cookie('clicked', 'true', {expires: 1}); // expires in 1 day
   });
   

   그런 다음 페이지로드에서이 같은 쿠키를 읽을 수 있습니다 :

   var clicked = $.cookie('clicked');
   

   쿠키는 귀하의 경우 세션에 걸쳐 지속으로 당신은 당신이 그것으로 할 필요가 어떤 짓을했는지 즉시 그 설정을 해제해야합니다. 당신은 사용자가 나중에 하루에 돌아와 여전히 True로 설정을 클릭 한 싶지 않을 것이다.

   if(clicked === "true") {
       //doYourStuff();
       $.cookie('clicked', null);
   }
   

   (설정 읽기 / 쿠키 비의 jQuery 방법은 바로 여기에서 찾을 수 있습니다)

   나는 개인적으로 클릭 된 상태를 기억으로 뭔가 간단한을 위해 쿠키를 사용하지 것이지만, 쿼리 문자열은 옵션이 아닌 경우 당신은 sessionStorage이 의지 작업을 지원하지 않는 정말 오래된 브라우저를 지원해야합니다. 먼저 sessionStorage에 대한 검사와 그 구현해야하며, 경우에만 그 쿠키 방법을 사용 실패합니다.

   window.name

   이 아마 로컬 스토리지 / sessionStorage 전에서 유래 나에게 해킹처럼 보이지만, 당신은 window.name 속성에 정보를 저장할 수 :

   window.name = "my value"
   

   그것은 단지 객체를 저장하려는 경우 그래서 당신이 바로 위의 로컬 스토리지의 예처럼 캐릭터 라인 화해야 할 것이다, 문자열을 저장할 수 있습니다 :

   window.name = JSON.stringify({ clicked: true });
   

   가장 큰 차이점이 정보는 페이지 새로 고침뿐만 아니라 다른 도메인뿐만 아니라에 걸쳐 유지된다는 점이다. 그러나, 당신이있어 현재의 탭으로 제한됩니다.

   이 방법은 당신은 당신의 페이지에 대한 몇 가지 정보를 저장할 수 있으며, 한 해당 탭에서 사용자의 체류, 당신은 그가 다른 웹 사이트와 뒤로 탐색 경우에도 동일한 정보에 액세스 할 수 있습니다. 일반적으로, 나는 당신이 실제로 하나의 브라우징 세션에서 크로스 도메인 정보를 저장할 필요가없는이 사용에 대해 조언을 것입니다.

2. ---

   2.사용 $ .holdReady (), 역사를보십시오

   사용 $ .holdReady (), 역사를보십시오

   기능 표시 () { 반환 $ ( "폼 입력 [TYPE = 숨겨진]") .replaceWith (함수 (I, EL) { 반환 "" }); } .holdReady (true)를 $; (history.state! == 널 (null) && history.state.clicked === 사실) 경우 { // 숨겨진 필드 //`history.state.clicked === TRUE '의 경우, 입력 종류 = 텍스트 '와'// '대체 입력 타입 = hidden` 보여 주다(); CONSOLE.LOG (기록); } 다른 { // 숨겨진 필드를 표시하지 않습니다 CONSOLE.LOG (기록); } $ .holdReady (거짓); $ (문서) .ready (함수 () { $ ( "을 입력하고 검색 값 = [TYPE = 제출]")를 CSTE 연구진 ({), 기능 (예 "를 클릭" e.preventDefault (); 경우 (history.state === 널 (null)) { // 물건을 할 history.pushState가 ({ "클릭"TRUE}); 입력 종류 = 텍스트 '와'// '대체 입력 타입 = hidden` 보여 주다(); CONSOLE.LOG (기록); } 다른 { // 다른 물건을 할 }; }); }); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

3. ---

   3.로컬 스토리지 또는 sessionStorage 보인다 사용하면 가장 좋은 방법이 될 수 있습니다.

   로컬 스토리지 또는 sessionStorage 보인다 사용하면 가장 좋은 방법이 될 수 있습니다.

   대신 전역 저장소 그것을 이런 식으로 클릭 된 변수를 저장하는 :

   if(localeStorage.getItem("clicked") === null)
       localeStorage.setItem("clicked", "FALSE"); // for the first time
   
   $(document).ready(function() {
   
       $("input[type='submit'][value='Search']").attr("onclick", "form.act.value='detailSearch';return true;");
   
       var clicked = localeStorage.getItem("clicked") == "FALSE" ? "TRUE" : "FALSE";
   
       localeStorage.setItem("clicked", clicked);
   
       if (clicked == "TRUE") {
         // show hidden fields
       } else {
         // don't show hidden fields
       }
   
   });
   

4. ---

   4.당신이 시도 할 수 :

   당신이 시도 할 수 :

    $("input[type='submit'][value='Search']").click(function(){
        form.act.value='detailSearch'; 
        clicked = true;  
        return true;
   });
   

from https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads by cc-by-sa and MIT license