Im Grunde muss ich ein einzelnes Bild hochladen, es in localStorage speichern und dann auf der nächsten Seite anzeigen.

Derzeit habe ich meine HTML-Datei hochgeladen:

<input type='file' id="uploadBannerImage" onchange="readURL(this);" />

Womit diese Funktion verwendet wird, um das Bild auf der Seite anzuzeigen

function readURL(input) 
{
    document.getElementById("bannerImg").style.display = "block";

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('bannerImg').src =  e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

Das Bild wird sofort auf der Seite angezeigt, damit der Benutzer es sehen kann. Sie werden dann gebeten, den Rest des Formulars auszufüllen. Dieser Teil funktioniert einwandfrei.

Sobald das Formular ausgefüllt ist, klicken sie auf "Speichern". Sobald dieser Knopf gedrückt ist, speichere ich alle Formulareingaben alslocalStorage Streicher. Ich brauche eine Möglichkeit, um das Bild auch als zu speichernlocalStorage Artikel.

Über die Schaltfläche Speichern werden sie auch auf eine neue Seite geleitet. Auf dieser neuen Seite werden die Benutzerdaten in einer Tabelle angezeigt, wobei sich das Bild oben befindet.

So schlicht und einfach, ich muss das Bild in speichernlocalStorage Sobald die Schaltfläche 'Speichern' gedrückt wird, leihen Sie das Bild auf der nächsten Seite auslocalStorage.

Ich fand einige Lösungen wiediese Geige unddieser artikel bei moz: // a HACKS.

Obwohl ich immer noch sehr verwirrt bin, wie das funktioniert, und ich wirklich nur eine einfache Lösung brauche. Grundsätzlich muss ich nur das Bild über findengetElementByID Sobald Sie auf die Schaltfläche "Speichern" geklickt haben, können Sie das Bild verarbeiten und speichern.