Persiste les variables entre les chargements de page

J’essaie de capturer le bouton d’envoi de mon formulaire et si le formulaire est soumis, la page s’actualise et j’affiche quelques champs masqués. Je voudrais capturer si le formulaire a été soumis avant ou non et si il soumis sur recharger, je voudrais afficher les champs cachés. J’essayais d’utiliser une variable globale pour y parvenir, mais je n’ai pas réussi à le faire fonctionner correctement.

Voici ce que j’ai essayé:

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 } }); 

Des suggestions sur ce qui ne va pas avec ce code?

Comme HTTP est sans état, chaque fois que vous chargez la page, elle utilisera les valeurs initiales de tout ce que vous définissez dans JavaScript. Vous ne pouvez pas définir une variable globale dans JS et simplement faire en sorte que cette valeur rest après le chargement de la page à nouveau.

Il y a plusieurs façons de stocker la valeur à un autre endroit pour pouvoir l’initialiser en charge à l’aide de JavaScript


Chaîne de requête

Lors de l’envoi d’un formulaire à l’aide de la méthode GET , l’URL est mise à jour avec une chaîne de requête ( ?parameter=value&something=42 ). Vous pouvez utiliser cela en définissant un champ de saisie dans le formulaire à une certaine valeur. Ce serait l’exemple le plus simple:

 

Lors du chargement initial de la page, aucune chaîne de requête n’est définie. Lorsque vous soumettez ce formulaire, la combinaison de name et de value de l’entrée est transmise dans la chaîne de requête telle que clicked=true . Donc, lorsque la page se charge à nouveau avec cette chaîne de requête, vous pouvez vérifier si le bouton a été cliqué.

Pour lire ces données, vous pouvez utiliser le script suivant lors du chargement de la page:

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

( Source )

La possibilité d’utiliser ceci dépend de la façon dont votre formulaire fonctionne actuellement, si vous utilisez déjà un POST, cela pourrait être problématique.

De plus, pour des ensembles de données plus importants, cela n’est pas optimal. Passer une chaîne de caractères n’est pas une grosse affaire, mais pour les tableaux et les objects de données, vous devez probablement utiliser Web Storage ou les cookies. Bien que les détails diffèrent un peu d’un navigateur à l’autre, la limite pratique de la longueur des URI est d’environ 2000 caractères.


Espace archivage sur le Web

Avec l’introduction de HTML5, Web Storage est également disponible, ce qui vous permet de sauvegarder des informations dans le navigateur à travers le chargement des pages. Il y a localStorage qui peut enregistrer des données plus longtemps (à condition que l’utilisateur ne les sessionStorage pas manuellement) et sessionStorage qui enregistre les données uniquement pendant la session de navigation en cours. Ce dernier est utile pour vous ici, car vous ne souhaitez pas que “clicked” soit défini sur true lorsque l’utilisateur revient plus tard.

Ici, je règle le stockage sur l’événement de clic de bouton, mais vous pouvez également le lier à la soumission de formulaire ou à toute autre chose.

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

Ensuite, lorsque vous chargez la page, vous pouvez vérifier si elle est définie à l’aide de ceci:

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

Même si cette valeur est uniquement enregistrée lors de cette session de navigation, il est possible que vous souhaitiez la réinitialiser plus tôt. Pour ce faire, utilisez:

 sessionStorage.removeItem('clicked'); 

Si vous souhaitez enregistrer un object ou un tableau JS, vous devez le convertir en chaîne. Selon les spécifications, il devrait être possible d’enregistrer d’autres types de données, mais cela n’est pas encore correctement implémenté dans les navigateurs.

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

La prise en charge du navigateur est très bonne , vous devriez donc pouvoir l’utiliser sans crainte de devoir prendre en charge d’anciens navigateurs obsolètes. Le stockage Web est l’avenir.


Biscuits

Une alternative à Web Storage consiste à enregistrer les données dans un cookie. Les cookies sont principalement conçus pour lire les données côté serveur, mais peuvent également être utilisés pour les données côté client.

Vous utilisez déjà jQuery, ce qui facilite la configuration des cookies. Encore une fois, j’utilise l’événement click ici, mais je pourrais l’utiliser n’importe où.

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

Ensuite, au chargement de la page, vous pouvez lire le cookie comme ceci:

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

Lorsque les cookies persistent à travers les sessions dans votre cas, vous devrez les désactiver dès que vous aurez fait ce que vous devez faire avec. Vous ne voudriez pas que l’utilisateur revienne un jour plus tard et que vous ayez encore clicked sur true.

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

(un moyen non-jQuery de définir / lire les cookies peut être trouvé ici )

Personnellement, je n’utiliserais pas de cookie pour quelque chose de simple en me rappelant un état cliqué, mais si la chaîne de requête n’est pas une option et que vous devez prendre en charge d’anciens navigateurs qui ne supportent pas sessionStorage, cela fonctionnera. Vous devez d’abord l’implémenter avec une vérification de sessionStorage, et seulement si cela échoue, utilisez la méthode des cookies.


window.name

Bien que cela me semble un hack provenant probablement avant localStorage / sessionStorage, vous pouvez stocker des informations dans la propriété window.name :

 window.name = "my value" 

Il ne peut stocker que des chaînes, donc si vous voulez enregistrer un object, vous devrez le ficeler comme dans l’exemple de localStorage ci-dessus:

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

La principale différence réside dans le fait que ces informations sont conservées non seulement sur les actualisations de page, mais également sur les différents domaines. Cependant, il est limité à l’onglet actuel dans lequel vous vous trouvez.

Cela signifie que vous pouvez enregistrer certaines informations sur votre page et que, tant que l’utilisateur rest dans cet onglet, vous pouvez accéder à ces mêmes informations même s’il a consulté un autre site Web. En général, je vous déconseille d’utiliser ceci, sauf si vous avez besoin de stocker des informations inter-domaines au cours d’une seule session de navigation.

Essayez d’utiliser $.holdReady() , history

    

Utiliser localeStorage ou sessionStorage semble être la meilleure sessionStorage .

Au lieu de sauvegarder la variable clicked dans la gamme Globle, stockez-la de cette manière:

 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 } }); 

Vous pourriez essayer ceci:

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