How do I save the rendered images to localStorage and then pop them out again after reloading?

  • 0
    Hello!
    I have two inputs, thanks to which I form a fetch request and I receive images that are displayed on the screen.
    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') });

    I save the resulting array in localStorage like this:
    localStorage.setItem('data',JSON.stringify(data));
                const arr = localStorage.getItem('data');
                let b = JSON.parse(arr)

    But I don't understand how to save the already displayed images after reloading the page. those. so that I can query for any number of images, they were saved and displayed each time since the last reboot.
    Sorry for the clumsy explanation.
    JavaScript Xavier Hess, Oct 27, 2019

  • 1 Answers
  • 0
    Well, you can try converting images to base64 and back to File , but is it worth it?
    Elizabeth Marquez

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!