Comment puis-je stocker et récupérer des images dans localStorage pour l'affichage Web ?

Stockage et récupération d'images dans le stockage local pour l'affichage Web

Problème :

Comment pouvez-vous téléchargez une image, enregistrez-la dans localStorage et affichez-la lors d'un prochain page ?

Solution :

Enregistrement de l'image dans localStorage :

1. Récupérez l'image téléchargée avec getElementById(' BannerImg').

2. Convertir l'image en Chaîne Base64 à l'aide de la fonction getBase64Image() :

   var imgData = getBase64Image(bannerImage);

3. Enregistrez la chaîne Base64 en tant que valeur localStorage :

   localStorage.setItem("imgData", imgData);

Récupération de l'image à partir du stockage local et affichage au suivant Page :

1. Sur la nouvelle page, créez un élément d'image avec un src vide :

   <img src="">

2. Au chargement de la page, récupérer la chaîne Base64 de localStorage :

   var dataImage = localStorage.getItem('imgData');

3. Appliquer le Base64 chaîne à l'attribut src de l'image :

   bannerImg = document.getElementById('tableBanner');
   bannerImg.src = "data:image/png;base64," + dataImage;

Considérations supplémentaires :

• La fonction getBase64Image() convertit l'image en un Format PNG par défaut. Vous pouvez spécifier un format différent si nécessaire.
• Cette solution est compatible avec la plupart des principaux navigateurs. Cependant, certains navigateurs existants peuvent ne pas prendre en charge localStorage.

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!