Comment puis-je enregistrer une image sur LocalStorage et l'afficher sur une nouvelle page ?

Enregistrer une image sur LocalStorage et l'afficher sur une nouvelle page

Lorsque vous travaillez avec des formulaires Web, il est souvent nécessaire de gérer les téléchargements d'images et stockez-les pour un affichage ultérieur. Cet article fournit une solution complète pour télécharger une image, l'enregistrer sur localStorage et l'afficher sur la page suivante.

Téléchargement et affichage de l'image

Pour télécharger et affichez une image sur la page actuelle, utilisez un champ de saisie HTML avec l'attribut type défini sur 'file' et le gestionnaire d'événements onchange qui appelle la fonction readURL. La fonction doit utiliser l'API FileReader pour lire le fichier image sélectionné et l'afficher sur la page à l'aide de l'attribut src d'un élément image.

Enregistrement de l'image dans LocalStorage

Une fois que l'utilisateur a rempli le reste du formulaire et cliqué sur le bouton « Enregistrer », enregistrez toutes les entrées du formulaire, y compris l'image, en tant que chaînes localStorage. Pour enregistrer l'image, utilisez la fonction getElementById pour obtenir l'élément d'image sur la page, convertissez-le en chaîne Base64 à l'aide d'une fonction comme celle fournie dans la réponse et stockez la chaîne en tant que valeur localStorage.

Affichage de l'image sur la nouvelle page

Sur la page suivante, créez une image avec un attribut src vide. Lorsque la page se charge, utilisez la fonction localStorage.getItem pour récupérer la chaîne Base64 de l'image depuis localStorage et appliquez-la à l'attribut src de l'image en utilisant le préfixe data:image/png;base64 pour indiquer le format des données de l'image.

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!