Passing img source value from one html page to another

Question

I have two pages:
-projects page that contain a gallery of images imported from json file
-project page that will display single image that was clicked in projects page
I want to store and pass that clicked image src and import it in project page. I can't find a solution how to comunicate between two js files and two html files.
These are my codes:
projects.js

const projectsGallery = document.querySelector('.projects__wrapper');

axios
    .get('../data.json')
    .then(async response => await response.data)
    .then(data => {
        const displayProjects = function (project) {
            projectsGallery.innerHTML = ``;
            project.forEach(project => {
                const card = `
        <div class="card"> <form action="submit" method=POST>
                            <img src=${project.src} id="myImg" class="img__project gallery-img" alt=${project.alt}></img>
                            <h1  class="hvr-grow">${project.projectName}</h1>
                            <div class="card__btn-wrapper">
                                <a class="card__btn hvr-sweep-to-left" href=${project.code}>
                                See Code
                        </a>
                        <a class="card__btn hvr-sweep-to-right" href=${project.live}>
                            Live
                    </a>
                    </form>
                        </div>
                        </div>
        `;
                projectsGallery.insertAdjacentHTML(`beforeend`, card);
            });
            modalFunc();
        };
        displayProjects(data.projects);

        images.forEach(image => {
            image.addEventListener(`click`, function () {
                const images = document.querySelectorAll('.gallery-img');
                let img = image.src;
                window.document.location = `/pages/project.html`;
            });
        });
    });

project.js

let src = localStorage.getItem(`img`);
console.log(img);

Since you are going to new page to show the project details you need to store the image in localStorage or session and show it from the localStorage or session. If your application is a single page application then you can share the data from one component to another componet. — Palash Kanti Bachar, Mar 06 '21 at 16:38
I did exactly that. I don't know what's the difference between localStorage and sessionStorage. I guess that sessionStorage is not permanent. I used sessionStorage and it worked. I will get deeper into this. — Vukasin, Mar 06 '21 at 16:44
sessionStorage is similar to localStorage ; the difference is that while data in localStorage doesn't expire, data in sessionStorage is cleared when the page session ends. ... A page session lasts as long as the tab or the browser is open, and survives over page reloads and restores — Palash Kanti Bachar, Mar 06 '21 at 16:47
Does this answer your question? [Share data between html pages](https://stackoverflow.com/questions/11609376/share-data-between-html-pages) — Liam, Apr 15 '21 at 10:51

score 1 · Accepted Answer · answered Mar 06 '21 at 16:45

Since your application is not in a single page application you are going to redirect new page so you need to store data in localStorage or sessionStorage.

Solution : Before redirecting the page store the data

localStorage.setItem(`img`, imageData);

and during render the new page get the data

let src = localStorage.getItem(`img`);

Passing img source value from one html page to another

1 Answers1