how to show search result in another page using javascript

I wanted to show the result of the form into another page. I tried redirecting the result using the window.href.location and localStorage but it's not redirecting it to another page. I used the click() for the button to see if it will show on the other page but I'm not sure what I'm doing wrong. The search bar is in index.html and after I click the search button, I wanted it show the result in another html file like movies.html

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

 const movieListEl = document.querySelector(".shows");
const moviesForm = document.getElementById("movie__searchbox");

async function main(event) {
    const url = `https://www.omdbapi.com/?apikey=39a36280&s=${encodeURI(event)}`;
    const search = await fetch(`${url}`);
    const data = await search.json();
    movieListEl.innerHTML = data.Search.map((movie) => movieHTML(movie)).join("");
}

// check when the form is submitted
moviesForm.addEventListener("submit", (event) => {
    const searchBarValue = document.getElementById("searchbar").value; // get input's value everytime the form is submitted
    console.log(searchBarValue);
    event.preventDefault(); // prevent refresh
    // localStorage.setItem("key", searchBarValue);
    // const searchKey = localStorage.getItem("key");
    main(searchBarValue);
});

function movieHTML(details) {
    return `<div class="shows__content">
        <figure class="shows__poster">
            <img src="${details.Poster}" alt="" class="poster">
        </figure>
           <div class="poster__description">
            <h4 class="poster__title">${details.Title}</h4>
            <p class="poster__year">${details.Year}</p>
        </div>
    </div>
        `;
}

//function click () {
// console.log(window.location)
// window.location.href = ${window.location.origin}/movies/movies.html
// }

<!-- language: lang-html -->

  <form action="#" id="movie__searchbox" class="nav__search-bar">
    <input type="text" id="searchbar" class="nav__search" placeholder="Search" />
    <button onclick="click()" type="submit">Search</button>
</form>
<div class="shows"></div>

<!-- end snippet -->

On your index page don't fetch your api just redirect it to that page where you want to show the result of movie list, just pass single parameter that is your search value.

In your other page where you want to display movie list get the urlParams and then fetch your api and display your movie list as per the given code which I provided below.

The index page code is:

<form action="#" id="movie__searchbox" class="nav__search-bar">
<input type="text" id="searchbar" class="nav__search" placeholder="Search" />
<button type="submit">Search</button>

</form>

Script for this:

 <script>
const moviesForm = document.getElementById("movie__searchbox");
// check when the form is submitted
moviesForm.addEventListener("submit", (event) => {
  const searchBarValue = document.getElementById("searchbar").value;
  event.preventDefault();
  window.location.href = `movieList.html?value=${searchBarValue}`;
});

</script>

The Movie List Page:

<div class="shows"></div>

And The Script for this page (Api fetch for movie as per urlParams):

<script>
    // Retrieve the data from the URL parameters or local storage
    const urlParams = new URLSearchParams(window.location.search);
    const value = urlParams.get('value');
    const movieListEl = document.querySelector(".shows");
    async function main(event) {
        const url = `https://www.omdbapi.com/?apikey=39a36280&s=${encodeURI(event)}`;
        const search = await fetch(`${url}`);
        const data = await search.json();
        movieListEl.innerHTML = data.Search.map((movie) => movieHTML(movie)).join("");
    }
    main(value);
    function movieHTML(details) {
        return `<div class="shows__content">
    <figure class="shows__poster">
        <img src="${details.Poster}" alt="" class="poster">
    </figure>
       <div class="poster__description">
        <h4 class="poster__title">${details.Title}</h4>
        <p class="poster__year">${details.Year}</p>
    </div>
</div>`;}
</script>

You can achieve what you are doing with window.href.location and localStorage itself.

I created 2 different files index.html, movies.html

index.html

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#" id="movie__searchbox" class="nav__search-bar">
        <input type="text" id="searchbar" class="nav__search" placeholder="Search" />
        <button onclick="click()" type="submit">Search</button>
    </form>
    <script>
        
        const moviesForm = document.getElementById("movie__searchbox");

        async function main(event) {
            const url = `https://www.omdbapi.com/?apikey=39a36280&s=${encodeURI(event)}`;
            const search = await fetch(`${url}`);
            const data = await search.json();
            localStorage.setItem("movie_list", JSON.stringify(data.Search));
            window.location.href = `${window.location.origin}/movies.html`
        }

        // check when the form is submitted
        moviesForm.addEventListener("submit", (event) => {
            const searchBarValue = document.getElementById("searchbar").value; // get input's value everytime the form is submitted
            console.log(searchBarValue);
            event.preventDefault(); // prevent refresh
            // localStorage.setItem("key", searchBarValue);
            // const searchKey = localStorage.getItem("key");
            main(searchBarValue);
        });
    </script>
</body>
</html>

<!-- end snippet -->

movies.html

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="shows"></div>
    <script>
        const movie_list = JSON.parse(localStorage.getItem("movie_list"))
        const movieListEl = document.querySelector(".shows");
        movieListEl.innerHTML = movie_list.map((movie) => movieHTML(movie)).join("");

        function movieHTML(details) {
            return `<div class="shows__content">
            <figure class="shows__poster">
            <img src="${details.Poster}" alt="" class="poster">
            </figure>
            <div class="poster__description">
            <h4 class="poster__title">${details.Title}</h4>
            <p class="poster__year">${details.Year}</p>
            </div>
            </div>
            `;
        }
    </script>
</body>
</html>

<!-- end snippet -->

Results