Créer une page pour indiquer au navigateur de ne pas mettre en cache/préserver les valeurs saisies

Question

La plupart des navigateurs mettent en cache les valeurs de saisie des formulaires. Ainsi, lorsque l'utilisateur rafraîchit une page, les entrées ont les mêmes valeurs.

Voici mon problème. Lorsqu'un utilisateur clique sur Sauvez le serveur valide les données POSTed (par exemple, les produits vérifiés) et, si elles ne sont pas valides, les renvoie au navigateur. Toutefois, comme indiqué ci-dessus, même si le serveur efface la sélection de certaines valeurs, celles-ci peuvent encore être sélectionnées à cause du cache du navigateur !

Mes données comportent des cases à cocher invisibles (tant que l'élément parent n'est pas sélectionné), de sorte que l'utilisateur peut ne pas savoir qu'une valeur précédente est toujours sélectionnée, jusqu'à ce qu'il clique sur Sauvez et obtient un message d'erreur - même si l'utilisateur pense que ce n'est pas le cas. Ce qui est irritant.

Cela peut être résolu en faisant Ctrl + F5 mais ce n'est même pas une solution. Existe-t-il un moyen automatique/programmé d'indiquer au navigateur de ne pas mettre en cache les données saisies dans un formulaire/une page ?

Answer 1

Est-ce que vous définissez explicitement les valeurs comme vides ? Par exemple :

<input type="text" name="textfield" value="">

Cela devrait empêcher les navigateurs d'insérer des données là où ils ne devraient pas. Alternativement, vous pouvez ajouter l'option autocomplete à la balise de formulaire :

<form autocomplete="off" ...></form>

Answer 2

De une référence Stack Overflow

Cela ne fonctionne pas avec value="" si le navigateur enregistre déjà la valeur, vous devez donc ajouter.

Pour une balise d'entrée, il y a l'attribut autocomplete que vous pouvez définir :

<input type="text" autocomplete="off" />

Vous pouvez également utiliser l'autocomplétion pour un formulaire.

Answer 3

Une autre approche consisterait à réinitialiser le formulaire en utilisant le JavaScript juste après le formulaire dans le HTML :

<form id="myForm">
  <input type="text" value="" name="myTextInput" />
</form>

<script type="text/javascript">
  document.getElementById("myForm").reset();
</script>

Answer 4

En fait, il y a deux façons de vider le cache :

<form autocomplete="off"></form>

ou

$('#Textfiledid').attr('autocomplete', 'off');

Answer 5

Cela a fonctionné pour moi dans les navigateurs plus récents :

autocomplete="new-password"