Как сохранить выведенные изображения в localStorage, а затем после перезагрузки их вывести снова?

Question

[JorikArbuzov]

Здравствуйте!
У меня есть два input, благодаря которым я формирую fetch запрос и мне приходят изображения, которые выводятся на экран.

fetch(`https://picsum.photos/v2/list?page=${heightValue}&limit=${weightValue}`, options)
        .then((response) => {
        console.log('response', response);
        return response.json();
        })
        // Вывожу массив изображений
        .then((data) => {
            console.log('data', data);  
            const result = document.querySelector('.result');
            const fragment = new DocumentFragment();      
            data.map(function(item){
                const image = document.createElement('img');
                image.src = item.download_url;
                fragment.append(image);
            })
            result.append(fragment);
        })
        .catch(() => { console.log('error') });

Полученный массив сохраняю в localStorage примерно так:

localStorage.setItem('data',JSON.stringify(data));
            const arr = localStorage.getItem('data');
            let b = JSON.parse(arr)

А вот как сохранить уже выведенные изображения после перезагрузки страницы не понимаю. т.е. чтобы я мог запрашивать любое количество изображений, они сохранялись и каждый раз выводились с последней перезагрузки.
Простите за корявость объяснения.

Answer 1

[Александр]

Ну, Вы можете попробовать конвертировать изображения в base64 и обратно в File, но стоит ли оно того?

Comments

[Алексей Ярков]

А зачем? Ему же урл в download_url приходит. Пусть урлы и хранит.

[JorikArbuzov]

Алексей Ярков, извините, что так зависаю, но как мне потом из этих урлов после перезагрузки страницы оставить изображения?

localStorage.setItem('localUrl', item.download_url)
const storage = localStorage.getItem('localUrl')

[Алексей Ярков]

JorikArbuzov, создать тег img и присвоить ему атрибут src с нужным урлом.

[JorikArbuzov]

Алексей Ярков, но ведь ничего не остается после перезагрузки или я что-то не так сделал?

data.map(function(item){
                localStorage.setItem('localUrl', item.download_url);
                const storage = localStorage.getItem('localUrl');
                const images = document.createElement('img');
                images.src = storage
                result.append(images)
            })

[JorikArbuzov]

Алексей Ярков, я понял свою ошибку, спасибо!

[Алексей Ярков]

JorikArbuzov, ну вот )) Понять самому гораздо лучше, чем кто-то будет объяснять. Так информация дольше сохранится и глубже отложится.