Wie kann ich ein Bild in LocalStorage speichern und auf einer neuen Seite anzeigen?

Ein Bild in LocalStorage speichern und auf einer neuen Seite anzeigen

Bei der Arbeit mit Webformularen ist es oft notwendig, Bilder hochzuladen und zu verwalten Bewahren Sie sie zur späteren Anzeige auf. Dieser Artikel bietet eine umfassende Lösung zum Hochladen eines Bildes, zum Speichern in localStorage und zum Anzeigen auf der nächsten Seite.

Hochladen und Anzeigen des Bildes

Zum Hochladen und Um ein Bild auf der aktuellen Seite anzuzeigen, verwenden Sie ein HTML-Eingabefeld mit dem Typattribut auf „Datei“ und den Onchange-Ereignishandler, der die readURL-Funktion aufruft. Die Funktion sollte die FileReader-API verwenden, um die ausgewählte Bilddatei zu lesen und sie mithilfe des src-Attributs eines Bildelements auf der Seite anzuzeigen.

Speichern des Bildes im LocalStorage

Sobald der Benutzer den Rest des Formulars ausfüllt und auf die Schaltfläche „Speichern“ klickt, speichern Sie alle Formulareingaben, einschließlich des Bildes, als localStorage-Zeichenfolgen. Um das Bild zu speichern, verwenden Sie die Funktion getElementById, um das Bildelement auf der Seite abzurufen, konvertieren Sie es mit einer Funktion wie der in der Antwort bereitgestellten in einen Base64-String und speichern Sie den String als localStorage-Wert.

Anzeigen des Bildes auf der neuen Seite

Erstellen Sie auf der nächsten Seite ein Bild mit einem leeren src-Attribut. Wenn die Seite geladen wird, verwenden Sie die Funktion localStorage.getItem, um die Base64-Zeichenfolge des Bildes aus localStorage abzurufen, und wenden Sie sie auf das src-Attribut des Bildes an, indem Sie das Präfix data:image/png;base64 verwenden, um das Bilddatenformat anzugeben.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Bild in LocalStorage speichern und auf einer neuen Seite anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!