Comment puis-je conserver les variables lors des rechargements de pages dans les applications Web ?

Comment conserver les variables entre les chargements de pages

Garder une trace des actions des utilisateurs lors des rechargements de pages est crucial pour améliorer l'expérience utilisateur dans les applications Web. Cependant, en raison de la nature apatride de HTTP, cette tâche peut s'avérer difficile.

Tentative et erreur

Une tentative infructueuse de capture de l'événement de soumission du formulaire et ensuite d'afficher les éléments masqués champs a été signalé. Le code JavaScript utilisait une variable globale (cliquée) pour stocker le statut de soumission, mais il n'a pas réussi à conserver sa valeur lors de l'actualisation de la page.

Solutions

Pour surmonter ce problème , plusieurs méthodes peuvent être mises en œuvre :

1. Chaîne de requête

Lors de la soumission de formulaires à l'aide de la méthode GET, l'URL est mise à jour avec une chaîne de requête contenant des paires paramètre-valeur. Cela vous permet de définir un champ de saisie du formulaire sur une valeur spécifique. Par exemple, un champ masqué peut être ajouté :

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

Lors des chargements de page suivants, vous pouvez utiliser JavaScript pour analyser la chaîne de requête et vérifier les valeurs transmises :

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

2. Web Storage

HTML5 a introduit Web Storage, qui fournit une API pour conserver les données dans le navigateur lors des chargements de pages. Il propose deux options : sessionStorage et localStorage.

sessionStorage :

• Les données ne persistent que pendant la session de navigation en cours.
• Convient au stockage données temporaires, telles que les états cliqués.

Code pour définir sessionStorage sur le bouton cliquez :

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

Code pour vérifier si sessionStorage est défini lors du chargement de la page :

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

localStorage :

• Les données persistent indéfiniment (sauf effacement manuel par l'utilisateur).
• Utile pour stocker des données au-delà d'une seule navigation session.

Code pour définir localStorage lors du clic sur le bouton :

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

Code pour vérifier si localStorage est défini lors du chargement de la page :

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

3. Cookies

Les cookies fournissent un autre mécanisme de stockage persistant des données. Contrairement au stockage Web, les cookies sont principalement conçus pour la communication côté serveur, mais ils peuvent également être utilisés pour la conservation des données côté client.

jQuery simplifie la gestion des cookies :

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

Code à lire un cookie au chargement de la page :

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

Pour supprimer un cookie, appelez $.cookie('clicked', nul).

4. window.name

Bien que quelque peu non conventionnelle, la propriété window.name peut être utilisée pour stocker des données lors des actualisations de page :

window.name = "my value";

Des chaînes ou des objets sérialisés peuvent être stockés :

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

Cependant, cette approche a des limites. Il est accessible sur tous les onglets et domaines, mais uniquement au sein de la même session de navigation. Ce n'est généralement pas recommandé pour conserver des données cruciales.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!