Im using unsplash api for fetch photos and im wondering how i can keep this photos after reload the page.
Probably i need to use local storage or session storage, but i need clue.
This is how I appending photos to layout:
const photo = document.createElement("div");
photo.classList.add("grid-item");
photo.innerHTML = `<img src="${photos.urls.small}">`
let arr = [];
arr.push(photo);
for (let i=0;i<arr.length;i++) {
// appending elements to the grid
grid.appendChild(arr[i]);
imagesLoaded( grid, function() {
msnry.appended( arr[i] );
msnry.layout();
If you want to do it through local storage, you can do it like this.
const photosKey = 'photos';
let photos = [];
// first check if the photos are in the local storage
// if they do exist then store them in a list;
if (localStorage.getItem(photosKey)) {
photos = JSON.parse(localStorage.getItem(photosKey))
} else {
// call the endpoint and store them
....YOUR API CALL
localStorage.setItem(photosKey, JSON.stringify(PHOTOTS_RETRIEVED_FROM_THE_API));
}
I've used JSON.parse and JSON.stringify because you can only store strings in the local storage.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.