Comment puis-je conserver les données de formulaire lors des chargements de pages en JavaScript ?

Comment conserver les variables entre les chargements de page

Comme HTTP est sans état, capturer les états de soumission du formulaire entre les actualisations de page peut être difficile. Le stockage persistant entre les chargements de pages n'est pas facile à réaliser en utilisant uniquement JavaScript.

Chaîne de requête

Lors de la soumission de formulaires à l'aide de la méthode GET, des chaînes de requête sont créées (?parameter=value ). En définissant un champ de saisie du formulaire sur une valeur spécifique, vous pouvez utiliser la chaîne de requête. Par exemple :

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

Lors de la soumission du formulaire, la chaîne de requête est mise à jour pour inclure le paramètre cliqué. Lorsque la page se recharge, vous pouvez vérifier la chaîne de requête pour déterminer si le bouton d'envoi a été cliqué.

Stockage Web

HTML5 fournit un stockage Web, permettant d'enregistrer les données. dans le navigateur lors des chargements de pages. LocalStorage stocke les données indéfiniment, tandis que SessionStorage ne conserve les données que pendant la session de navigation en cours. À cette fin, SessionStorage est approprié :

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

Cookies

Les cookies peuvent également stocker des données côté client. En utilisant jQuery, vous pouvez facilement définir des cookies :

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

Window.name

En tant qu'approche hackish, vous pouvez stocker des données dans la propriété window.name :

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

Cette approche est limitée à l'onglet actuel et stocke uniquement les chaînes.

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!