Javascript 将img源值从一个html页面传递到另一个html页面

我有两页：
-包含从json文件导入的图像库的项目页面
-将显示在项目页面中单击的单个图像的项目页面
我想存储并传递单击的图像src，并将其导入项目页面。 我找不到如何在两个js文件和两个html文件之间通信的解决方案
这些是我的代码：
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`;
            });
        });
    });

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

---

由于您的应用程序不在单页应用程序中，您将重定向新页，因此需要将数据存储在localStorage或sessionStorage中

解决方案： 在重定向页面之前，请存储数据

localStorage.setItem(`img`, imageData);

并在渲染新页面时获取数据

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

---

由于要转到新页面以显示项目详细信息，因此需要将映像存储在localStorage或session中，并从localStorage或session中显示它。如果您的应用程序是单页应用程序，那么您可以将数据从一个组件共享到另一个组件。我不知道本地存储和会话存储有什么区别。我想会话存储不是永久性的。我使用了sessionStorage，它很有效。我将对此进行更深入的讨论。会话存储类似于本地存储；不同之处在于，虽然localStorage中的数据不会过期，但当页面会话结束时，sessionStorage中的数据将被清除。。。页面会话在选项卡或浏览器打开时持续，并在页面重新加载和恢复过程中继续。这是否回答了您的问题？