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>