简体   繁体   中英

Keep data after reload (gallery)

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM