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

---