페이지를 다시로드 할 때 확인란이 선택된 상태로 유지되는 이유는 무엇입니까?


81

다음 코드가있는 웹 페이지를 다시로드하고 있습니다.

<label for="showimage">Show Image</label>
<input id="showimage" name="showimage" type="checkbox" value="1" />

페이지를 다시로드 할 때마다 HTML이 브라우저로 전송 된 상태로 유지되지만 확인란은 항상 다시로드가 수행 될 때 선택된 값을 사용합니다. 즉, 사용자가 확인란을 선택하고 다시로드하면 확인란이 여전히 선택되어 있습니다.

여기에서 캐싱이 진행되고 있습니까?

편집 : 나는 아래 Gordon Bell의 해결책을 시도했고 이것이 value = "1"을 제거한 후에도 여전히 일어나고 있음을 발견했습니다. 내가 놓칠 수있는 다른 것이 있습니까?

<label for="showimage">Show Image</label> 
<input id="showimage" name="showimage" type="checkbox" /> 

답변:


38

예, 캐싱이라고 생각합니다. 예를 들어 Firefox에서이 동작을 봅니다 (Safari가 아니라 가치가 있습니다. :).

당신은 페이지를 다시로드 캐시 우회 (파이어 폭스)를 사용 할 수 있습니다 CTRL- SHIFT- R당신은 체크 값이 수행되지 않습니다 볼 수 있습니다 (일반 CTRL- R그러나 캐시에서 정보를 사로 잡고)

편집 : Firefox에서이 서버 측을 비활성화하여 캐시 제어 헤더를 설정할 수있었습니다.

Cache-Control: no-store

이것은 Firefox의 "양식 값 기억"기능을 비활성화하는 것 같습니다


예, CTRL-SHIFT-R은 확인란을 재설정합니다. 이것이 캐시되는 것을 방지하는 방법이 있습니까?
Readonly

나는 그렇게 생각하지 않습니다 (적어도 서버 측에서는 아닙니다). firefox는 캐싱에 정말 공격적입니다. 클라이언트 측에서 이와 같은 상황에서 안정적으로 캐싱을 중지 할 수있을뿐입니다
Owen

2
캐시에서 값을 가져 오므로 캐시입니다. 당신이 말하려는 것을 내가 오해하지 않는 한.
Owen

1
Firefox의 공격적인 캐싱은 주요 PITA이며 개발할 때 항상 나를 붙잡습니다. 이전에 Cache-Control 헤더를 사용해 본 적이 없지만 작동한다면 stackoverflow가 여기에서 보내는 시간을 정당화했습니다.
Cruachan

1
Firefox의 다운로드 된 파일 저장소에서와 같이 "캐시"에서 값이 제공되지 않습니다. 예 : 다른 곳으로 이동 한 다음 동일한 URL을 따라 가면 페이지가 캐시되지만 값은 캐시되지 않습니다. 캐시를 깨면 강제로 다시로드 할 수 있지만 이로 인해 기능이 비활성화되는 것은 우연 일뿐입니다.
bobince

165

autocomplete="off"페이지의 양식 요소에 추가 하십시오. 단점은 이것이 유효한 XHTML이 아니지만 복잡한 자바 스크립트없이 문제를 해결한다는 것입니다.


1
캐시 제어 헤더가 아닌 나를 위해 작동합니다.
Lajos Meszaros 2014

7
내가하고있는 무슨에서 읽기 , 그것은 이다 HTML5에서 실제로 유효합니다. (이 주제에 대해 자세히 읽기 전에 이전 댓글을 찬성했습니다.) 따라서 HTML5를 사용하는 경우 체크 박스에 마음대로 자동 완성을 사용하세요.
EF0 2015 년

3
10 년이 넘었습니다. 이 대답은 두통을 덜어주었습니다!
Daan van den Bergh

33

js로 set autocomplete = "off"도 잘 작동합니다.

예를 들어 jquery 사용 :

$(":checkbox").attr("autocomplete", "off");

감사합니다. 많은 도움이되었습니다. :)
Lyubomyr Shaydariv

1
양식의 ID가 $("#formId").attr("autocomplete", "off")어디에 필요하다는 것을 알았습니다 #formId.
Dan Diplo 2012

. @DanDiplo 우리가 양식 때문에 그 ( "#formId")를 적용 비논리적 ATTR없이 체크 상자를 사용하여 많은 경우 ( "자동 완성"는 "OFF")가 있습니다
Clain Dsilva

2
@ClainDsilva 양식 외부에서 확인란을 사용할 있다고해서 내가 말한 것이 비논리적이라는 의미는 아닙니다. (대부분의 시나리오에서 작동하지만) 완전히 포괄적이지 않다고 주장 할 수 있지만 논리적이지 않다고 말하는 것은 작동한다는 점을 감안할 때 기이합니다.
Dan Diplo 2014 년

@DanDiplo 확인란 만 자동 완성을 적용 할 수있을 때, 그런 식으로 잘 작동합니다. 귀하의 솔루션이 작동한다는 데 동의하지만 양식 상자 내의 모든 요소에도 적용됩니다. 그러나 이는 의도 된 동작이 아닐 수 있습니다. 질문은 전체 양식이 아닌 확인란 만 선택하도록 좁혔습니다. 존경하는 마음으로 질문에 맞는 최상의 솔루션을 찾고 싶습니다. 이 맥락에서 전체 양식에 대해 자동 완성 기능을 적용하는 것은 옳지 않습니다.
Clain Dsilva 2014 년

1

Firefox의 멋진 기능입니다. 무언가를 입력하고 페이지를 다시로드하면 텍스트가 텍스트 영역에 남아 있습니다. 선택한 다른 설정에 대한 Idem.

아아, 그것은 SO (아마 JS로 재설정)와 IE와 같은 멍청한 브라우저에서 작동하지 않습니다.

해결책을 제안합니다. 정말로 그렇게해야하는 경우 JS로 양식을 재설정하십시오. form.reset ()이 작업을 수행 할 수 있습니다 (입력 재설정 버튼처럼 작동).


1
약간 해키하거나 대포로 참새를 쏘는 것과 같습니다.
Lajos Meszaros 2014-07-09

@ MészárosLajos hacky / overkill이란 무엇이며 왜 그렇게 생각합니까? 더 간단한 것이 보이십니까?
PhiLho

양식을 부분적으로 만 재설정하려면 어떻게해야합니까? 개인적으로 체크 박스에 대해서만 입력 캐시를 비활성화하고 텍스트 필드에 대해서는 비활성화하고 싶습니다. 나는 이것이 파이어 폭스의 좋은 기능이라는 데 전적으로 동의하지만 기본적으로 재 설계된 체크 박스 인 사용자 정의 상태 버튼 2 개에는 적용되지 않는다. 또 다른 한가지는 왜 자바 스크립트를 사용 하는가입니다.이 동작을 방지하기 위해 html 속성을 사용할 수 있습니다. 그리고 예, "autocomplete = off"는 html 코드를 무효화하지만 페이지는 여전히 작동합니다.
조스 메스 자 로스

3
"Firefox의 멋진 기능입니다.": 검색 결과 페이지에서 필터링 확인란을 클릭 한 다음 다시로드하면 표시된 데이터 세트와 함께 선택된 필터가 의미가 없습니다. -이전에 언급 한 주요 PITA라고 말합니다.
Sharky 2014-08-05

나는 이것을 좋은 기능이라고 부르지 않을 것입니다 ... 예, 많은 텍스트를 입력하고 페이지를 새로 고쳐야 할 때 도움이되지만 UI를 개발하는 경우에는 좋지 않습니다. 특색.
userfuser

1

이것은 오래된 질문이지만 파이어 폭스에게는 여전히 활발한 문제입니다. 내가 시도한 응답 중 어느 것도 해결 되지 않았지만 나를 위해 해결 한 것은 단순히 다음과 같습니다.

    document.getElementById('formId').reset();

이렇게하면 페이지가로드 될 때마다 양식이 기본 옵션으로 재설정됩니다. 세분화 된 제어를 잃어 버리기 때문에 이상적이지는 않지만이 문제를 해결 한 유일한 방법입니다.


0

또는 f5 대신 주소 표시 줄에서 Enter 키를 누릅니다. :)


1
또는 사용자에게 그렇게하도록 제안하십시오 (이것은 개발자의 질문입니다).
Mr. TA

사용자가 항상 Crtl + Shift + R을 사용하여 페이지를 새로 고칠 것을 기대할 수는 없습니다. 그렇지 않습니까?
Lajos Meszaros 2014-07-09

0

브라우저 캐싱 때문일 수 있습니다. 너무 자주 변경되지 않는 정적 웹 사이트에 매우 유용하고 동적 웹 애플리케이션에는 매우 좋지 않습니다.
페이지의 헤드 섹션에있는 두 개의 메타 태그를 사용해보십시오. 두 번째 메타 태그는 "no-cache"메타 태그를 인식하지 않는 이전 브라우저 (IE5) 용이며 서로 다른 결과는 동일하지만 각 요청은 서버로 전달됩니다.

<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Expires" CONTENT="-1">

IE5와 같은 오래된 브라우저를 정말 신경 쓰나요? 당신의 <head>에 적은 메타 태그를 사용하기 때문에 그런데, PHP와 헤더를 보내는 것은, 조금 더 나은 것 같습니다
라요스 메스 자 로스

2
그의 대답은 2008 년이었고 @ MészárosLajos의 코멘트는 2014 년이었습니다. 그 당시에는 중요했습니다.
Duniyadnd 2015 년


0

그것을 해결하기위한 대중의 생각

양식 작성 및 재설정 버튼

<form>
<checkbox>
<reset>
</form>

$(reset).trigger("click");//to clear the cache and input 
$(checkbox).trigger("click");//to mark checkbox
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.