¿Por qué la casilla de verificación permanece marcada al volver a cargar la página?

80

Estoy recargando una página web que tiene el siguiente código:

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

Aunque el HTML que se envía al navegador es el mismo para cada recarga de la página, la casilla de verificación siempre toma el valor marcado cuando se realiza una recarga. En otras palabras, si el usuario marca la casilla de verificación y vuelve a cargar, la casilla de verificación aún está marcada.

¿Hay algún almacenamiento en caché aquí?

Editar : Probé la solución de Gordon Bell a continuación y descubrí que esto sigue sucediendo incluso después de eliminar el valor = "1". ¿Algo más que pueda estar perdiendo?

<label for="showimage">Show Image</label> 
<input id="showimage" name="showimage" type="checkbox" />
firefox Solo lectura
fuente

Respuestas:

38

Sí, creo que se está almacenando en caché. Veo este comportamiento en Firefox, por ejemplo (no en Safari, por lo que vale :)).

puede volver a cargar la página y omitir el caché (en Firefox) usando CTRL- SHIFT- Ry verá que el valor de verificación no se lleva (lo normal CTRL- Rtomará la información del caché sin embargo)

editar : pude deshabilitar este lado del servidor en Firefox, configurando un encabezado de control de caché:

Cache-Control: no-store

esto parece deshabilitar la función "recordar valores de formulario" de Firefox

Owen
fuente
Sí, CTRL-SHIFT-R hace que las casillas de verificación se restablezcan. ¿Hay alguna forma de evitar que esto se almacene en caché?
Solo lectura
no lo creo (al menos no desde el lado del servidor). Firefox es realmente agresivo al almacenar cosas en caché. Solo he podido hacer que deje de almacenar en caché de manera confiable en situaciones como esta desde el lado del cliente
Owen
2
está tomando valores de su caché, por lo tanto, está almacenando en caché. a menos que haya entendido mal lo que intentas decir.
Owen
1
El almacenamiento en caché agresivo de Firefox es un PITA importante y siempre me atrapa cuando desarrollo contra él. No he probado el encabezado Cache-Control antes, pero si funciona, stackoverflow solo justificó el tiempo que paso aquí por completo.
Cruachan
1
Los valores no provienen de "la caché" como en el almacén de archivos descargados de Firefox. Por ejemplo: si navega fuera y luego sigue la misma URL, la página se almacena en caché, pero los valores no. Al romper el caché, puede forzar una recarga completa, pero es solo una coincidencia que esto también deshabilite la función.
Bobince el
163

Agregue autocomplete="off"en el elemento de formulario en la página. La desventaja es que este no es XHTML válido, pero soluciona el problema sin ningún javascript complicado.

TALlama
fuente
1
Funciona para mí, donde el encabezado de control de caché no lo hace.
Lajos Meszaros
7
Por lo que estoy leyendo , en realidad es válido en HTML5. (Voté a favor del comentario anterior antes de leer más sobre el tema). Por lo tanto, use la función de autocompletar en las casillas de verificación si está usando HTML5.
EF0
1
Más de 10 años después. ¡Esta respuesta me salvó un dolor de cabeza!
Daan van den Bergh
32

set autocomplete = "off" con js también funciona bien.

por ejemplo usando jquery:

$(":checkbox").attr("autocomplete", "off");
RainChen
fuente
Gracias, eso me ayudó mucho. :)
Lyubomyr Shaydariv
1
Descubrí que necesitabas $("#formId").attr("autocomplete", "off")dónde #formIdestá la identificación de tu formulario.
Dan Diplo
@DanDiplo hay muchas ocasiones en las que usamos una casilla de verificación sin un formulario, por lo que es ilógico aplicar ("#formId"). Attr ("autocomplete", "off")
Clain Dsilva
2
@ClainDsilva El hecho de que pueda usar una casilla de verificación fuera de un formulario no significa que nada de lo que dije sea ilógico. Puede afirmar que no es totalmente completo (aunque funciona para la mayoría de los escenarios), pero decir que no es lógico es extraño dado que funciona.
Dan Diplo
@DanDiplo cuando podemos aplicar el autocompletado solo en la casilla de verificación, funciona bien de esa manera, estoy de acuerdo en que su solución funciona pero también se aplica a todos los elementos dentro del cuadro de formulario. Sin embargo, ese puede no ser el comportamiento previsto. La pregunta se redujo a la casilla de verificación sola y no a todo el formulario. Con el debido respeto, solo quiero encontrar la mejor solución adaptada a la pregunta. En este contexto, no es correcto aplicar la función de autocompletar para todo el formulario.
Clain Dsilva
1

Es una buena característica de Firefox: si escribe algo pero recarga la página, el texto permanece en el área de texto. Idem para otras configuraciones que haya elegido.

Por desgracia, no funciona en SO (probablemente reiniciado por JS) y navegadores más tontos como IE ...

Lo que sugiere una solución: si realmente necesita hacer eso, restablezca el formulario con JS. form.reset () podría hacer el trabajo (actúa como el botón de entrada Reset).

PhiLho
fuente
1
Parece un poco hacky, o como dispararle a un gorrión con un cañón.
Lajos Meszaros
@ MészárosLajos ¿Qué es hacky / overkill, y por qué lo ve como tal? ¿Ves algo más sencillo?
PhiLho
¿Qué pasa si solo desea que el formulario se restablezca parcialmente? Yo, personalmente, solo quiero deshabilitar la caché de entrada para las casillas de verificación, pero no para los campos de texto. Estoy completamente de acuerdo contigo en que esta es una buena característica de Firefox, pero no para los botones personalizados de dos estados, que básicamente son casillas de verificación rediseñadas. Otra cosa es, ¿por qué usar javascript, donde simplemente puede usar una propiedad html para evitar este comportamiento? Y sí, lo sé, "autocomplete = off" invalida el código html, pero la página sigue funcionando.
Lajos Meszaros
3
"Es una buena característica de Firefox": si hace clic en las casillas de verificación de filtrado en una página de resultados de búsqueda y luego la vuelve a cargar, los filtros marcados no tienen sentido con el conjunto de datos mostrado. -Digo que este es un PITA importante como se dijo anteriormente.
Sharky
Yo nunca llamaría a esto una buena característica ... sí, ayuda cuando estás escribiendo mucho texto y luego necesitas actualizar la página, pero si estás desarrollando una interfaz de usuario, está lejos de ser una buena característica.
userfuser
1

Esta es una pregunta antigua, pero sigue siendo un problema activo para Firefox. Ninguna de las respuestas que probé lo resolvió, pero lo que sí lo resolvió para mí fue simplemente esto:

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

Esto simplemente restablece el formulario a las opciones predeterminadas cada vez que se carga la página. No es ideal ya que pierde el control granular, pero es lo único que resolvió esto para mí.

cmshnrblu
fuente
0

o en lugar de f5 presione enter en la barra de direcciones :)

Ionuț Staicu
fuente
1
O sugiera al usuario que haga eso, más bien (esta es una pregunta del desarrollador).
Sr. TA
Realmente no podemos esperar que los usuarios siempre actualicen la página con Crtl + Shift + R, ¿no es así?
Lajos Meszaros
0

Podría deberse a un almacenamiento en caché del navegador, muy útil para sitios web estáticos que no se cambian con demasiada frecuencia, muy malo para aplicaciones web dinámicas.
Pruebe con esas dos metaetiquetas en la sección de cabecera de la página. La segunda metaetiqueta es para navegadores antiguos (IE5) que no reconocen la metaetiqueta "sin caché" y, aunque son diferentes, producen el mismo resultado: cada solicitud va al servidor.

<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Expires" CONTENT="-1">
Aleksandar
fuente
¿Realmente nos interesan los navegadores tan antiguos, como IE5? Por cierto, enviar los encabezados con PHP parece un poco mejor, porque usa menos metaetiquetas en el <head>
Lajos Meszaros
2
Su respuesta fue en 2008, el comentario de @ MészárosLajos fue en 2014. En ese momento sí, sí importaba.
Duniyadnd
0

$ ("# showimage"). prop ("comprobado", falso);

Sumit Mehta
fuente
0

la idea pública para resolver eso

hacer forma y botón de reinicio 

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

$(reset).trigger("click");//to clear the cache and input 
$(checkbox).trigger("click");//to mark checkbox
Mohamed Gomah
fuente