페이지 로드 사이에 변수 지속

페이지 로드 사이에 변수 지속

양식의 제출 버튼을 캡처하려고 하는데 양식이 제출되면 페이지가 새로 고쳐지고 숨겨진 필드가 몇 개 표시됩니다.이전에 양식을 제출한 적이 있는지 없는지 캡처하고 다시 로드할 때 제출한 것이라면 숨겨진 필드를 숨기고 싶습니다.이를 위해 글로벌 변수를 활용하려 했으나 제대로 작동하지 못했습니다.

제가 시도한 것은 다음과 같습니다.

  var clicked = false;

  $(document).ready(function() {

    $("input[type='submit'][value='Search']").attr("onclick", "form.act.value='detailSearch'; clicked = true;  return true;");

    if (clicked == true) {
      // show hidden fields
    } else {
      // don't show hidden fields
    }
  });

이 코드에 무엇이 문제인지에 대한 제안이 있습니까?

HTTP는 상태 비저장이므로 페이지를 로드할 때마다 자바스크립트에서 설정한 값의 초기값을 사용합니다.JS에서 글로벌 변수를 설정하고 페이지를 다시 로드한 후 해당 값을 그대로 유지할 수 없습니다.

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

---

쿼리 문자열

을 할 를 사용하여 하는 경우GET 문자열, url리로다은(다로 )로 됩니다.?parameter=value&something=42). 할 수 있습니다 양식의 입력 필드를 일정 값으로 설정하여 이를 활용할 수 있습니다.이는 가장 간단한 예입니다.

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

페이지의 초기 로드 시 쿼리 문자열이 설정되지 않습니다.양식을 때,할,,name그리고.value은이리다에과다에리nbds의은과ngefe이yclicked=true 해당 로 페이지가 할 수 . 따라서 해당 쿼리 문자열로 페이지가 다시 로드되면 버튼이 클릭되었는지 확인할 수 있습니다.

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

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를 사용하고 있다면 문제가 있을 수 있습니다.

또한 더 큰 데이터 집합의 경우에는 최적보다 작습니다.문자열을 전달하는 것은 큰 문제가 아니지만 데이터의 배열 및 개체의 경우 Web Storage 또는 쿠키를 사용해야 할 것입니다.브라우저마다 세부사항이 조금씩 다르지만, URI 길이에 대한 실질적인 제한은 약 2000자입니다.

---

웹 스토리지

HTML5의 도입으로 페이지 로드 전반에 걸쳐 브라우저에 정보를 저장할 수 있는 Web Storage도 도입되었습니다. 있습니다.localStorage(한) 더 긴할 수 (사용자가 수동으로 지우지 않는 한) 데이터를 저장할 수 .sessionStorage현재 검색 세션 중에만 데이터를 저장합니다.후자는 사용자가 나중에 돌아왔을 때 "클릭"을 참으로 설정하고 싶지 않기 때문에 여기서 유용합니다.

여기서 저는 버튼 클릭 이벤트에 저장소를 설정했지만, 당신은 그것을 양식 제출 또는 다른 것으로 바인딩할 수도 있습니다.

$('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'));

브라우저 지원은 매우 우수하므로 오래되거나 불분명한 브라우저를 지원할 필요가 없는 한 이 기능을 안전하게 사용할 수 있습니다.웹 스토리지는 미래입니다.

---

쿠키

Web Storage의 대안은 쿠키에 데이터를 저장하는 것입니다.쿠키는 주로 데이터 서버 측을 읽기 위해 만들어지지만 순수하게 클라이언트 측 데이터에도 사용할 수 있습니다.

이미 jQuery를 사용하고 있기 때문에 쿠키를 쉽게 설정할 수 있습니다. 저는시,는을 .click이벤트는 여기에 있지만 어디서나 사용할 수 있습니다.

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

그러면 페이지 로드에서 다음과 같이 쿠키를 읽을 수 있습니다.

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

쿠키는 세션 전체에 걸쳐 지속되므로 필요한 작업을 수행한 후 즉시 설정을 해제해야 합니다. 것을 않을도 있지만 Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ,clicked참으로 설정합니다.

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

(non-jQuery에서 쿠키를 설정/판독하는 방법은 여기에서 확인할 수 있습니다.)

개인적으로 클릭 상태를 기억하는 간단한 용도로 쿠키를 사용하지는 않지만, 쿼리 문자열이 옵션이 아니며 sessionStorage를 지원하지 않는 오래된 브라우저를 지원해야 하는 경우에는 이렇게 사용할 수 있습니다.sessionStorage를 먼저 확인하고 실패한 경우에만 쿠키 메서드를 사용하여 이를 구현해야 합니다.

---

window.name

이것이 sessionStorage , 는 정보를 "localStorage/sessionStorage"의 "localStorage/sessionStorage", "localStorage"에할 수 .window.name속성:

window.name = "my value"

할 수 만 를 하려면 와 을 해야 할 해야 을 만 할 와 localStorage예:

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

가장 큰 차이점은 이 정보가 페이지 새로 고침뿐만 아니라 여러 도메인에 걸쳐 유지된다는 것입니다.그러나 현재 탭으로 제한됩니다.

즉, 페이지에 일부 정보를 저장할 수 있으며, 사용자가 해당 탭에 있는 한 다른 웹 사이트를 찾았다가 다시 돌아온 경우에도 동일한 정보에 액세스할 수 있습니다.일반적으로 단일 검색 세션 중에 도메인 간 정보를 실제로 저장할 필요가 없는 경우에는 이를 사용하지 않는 것이 좋습니다.

활용해 보십시오.

function show() {
  return $("form input[type=hidden]")
          .replaceWith(function(i, el) {
            return "<input type=text>"
          });
}

$.holdReady(true);
    if (history.state !== null && history.state.clicked === true) {
       // show hidden fields
       // if `history.state.clicked === true` ,
       // replace `input type=hidden` with `input type=text`
       show();
       console.log(history);

    } else {
        // don't show hidden fields
        console.log(history);
    }
$.holdReady(false);

  $(document).ready(function() {

    $("input[type=submit][value=Search]")
    .on("click", function(e) {
        e.preventDefault();
        if (history.state === null) {
          // do stuff
          history.pushState({"clicked":true});
          // replace `input type=hidden` with `input type=text`
          show();
          console.log(history);
        } else {
          // do other stuff
        };
    });

  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST">
    <input type="text" name="name" value="" />
    <input type="submit" value="Search" />
    <input type="hidden" />
    <input type="hidden" />
</form>

사용.localeStorage아니면sessionStorage최선의 선택인 것 같습니다.

저장하는 대신clicked글로블 스코프의 변수는 다음과 같은 방식으로 저장합니다.

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
    }

});

이것을 시도해 볼 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads