Maison > interface Web > js tutoriel > Comment puis-je conserver les données de formulaire lors des chargements de pages en JavaScript ?

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

Patricia Arquette
Libérer: 2024-12-20 22:28:18
original
259 Les gens l'ont consulté

How Can I Preserve Form Data Across Page Loads in 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>
Copier après la connexion

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');
});
Copier après la connexion

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
});
Copier après la connexion

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 });
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal