[Javascript] Как сохранить изображение на localStorage и отобразить его на следующей странице?


Answers

Я написал небольшую библиотеку 2,2kb для сохранения изображения в локальном хранилище JQueryImageCaching Usage:

<img data-src="path/to/image">
<script>
    $('img').imageCaching();
</script>
Question

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

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

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

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

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 изображение на следующей странице с localStorage .

Я нашел некоторые решения, такие как эта скрипка: http://jsfiddle.net/8V9w6/

И это: https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

Хотя я все еще очень смущен тем, как это работает, и мне действительно нужно простое решение. В принципе, мне просто нужно найти изображение через getElementByID после нажатия кнопки «Сохранить», а затем обработать и сохранить изображение.

Вся помощь очень ценится. Благодаря!