local storage показ картинок после перезагрузки

В 1 input я ввожу номер страницы во второй кол-во страниц. С этим я справился но после перезагрузки картинки пропадают. Подскажите как мне сохранить данные в localStorage так чтоб после перезагрузки показывались последние картинки.

const btn = document.querySelector('.btn');

btn.addEventListener('click', () => {
  const inputLeft = document.querySelector('.input-left').value;
  const inputRight = document.querySelector('.input-right').value;
  const url = 'https://picsum.photos/v2/list?';
  const widthImg = `${url}` + 'page=' + `${inputLeft}` + '&' + 'limit=' + `${inputRight}`;
  fetch(widthImg)
    .then((response) => {
      const res = response.json();
      return res;
    })
    .then((data) => {
      const inputLeft = document.querySelector('.input-left').value;
      const inputRight = document.querySelector('.input-right').value;
      if (typeof inputLeft === 'string') {
        const leftNum = +inputLeft;
        // console.log(leftNum);
        if (leftNum < 1 || leftNum > 10) {
          console.log('Номер страницы вне диапазона от 1 до 10!!!');
        } else if (leftNum >= 1 && leftNum <= 10) {
          console.log(`page=${leftNum}`);
        } else {
          console.log('Номер страницы вне диапазона от 1 до 10!!!');
        }
      }
      if (typeof inputRight === 'string') {
        const rightNum = +inputRight;
        // console.log(rightNum);
        if (rightNum < 1 || rightNum > 10) {
          console.log('Номер страницы вне диапазона от 1 до 10!!!');
        } else if (rightNum >= 1 && rightNum <= 10) {
          console.log(`limit=${rightNum}`);
        } else {
          console.log('Номер страницы вне диапазона от 1 до 10!!!');
        }
      }
      const imageApi = document.querySelector('.img');
      let urls = '';
      for (let i of data) {
        console.log(i.download_url);
        let card = `<img src="${i.download_url}" width="400">`;
        urls += card;
      }
      localStorage.setItem('key', urls);
      let r = localStorage.getItem('key');
      console.log(r);
      imageApi.innerHTML = r;
    })
    .catch(() => {
      console.log('error');
    })
})
<button class="btn">request</button>
<input type="text" class="input-left" placeholder="number page">
<input type="text" class="input-right" placeholder="limit">
<div class="img"></div>


Ответы (0 шт):