Поэтому, в основном, мне нужно загрузить одно изображение, сохранить его в localStorage, а затем отобразить на следующей странице.

В настоящее время у меня есть загрузка HTML-файла:

Который использует эту функцию для отображения изображения на странице

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]);
    }
}

Изображение отображается мгновенно на странице для просмотра пользователем. Затем их просят заполнить оставшуюся форму. Эта часть работает отлично.

Когда форма заполнена, они нажимаютСохранить' кнопка. После нажатия этой кнопки все входные данные формы сохраняются какlocalStorage строки. Мне нужен способ сохранить изображение какlocalStorage вещь.

Кнопка сохранения также направит их на новую страницу. На этой новой странице будут отображаться данные о пользователях в виде таблицы с изображением вверху.

Так просто и ясно, мне нужно сохранить изображение вlocalStorage однажды 'Сохранить' Нажмите кнопку, а затем одолжите изображение на следующей странице.localStorage

Я нашел несколько решений, таких какэта скрипка а такжеэта статья в moz: // HACKS.

Хотя я до сих пор не совсем понимаю, как это работает, и мне действительно нужно только простое решение. По сути, мне просто нужно найти изображение черезgetElementByID однажды 'Сохранить' Нажмите кнопку, а затем обработайте и сохраните изображение.