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

 

 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`
// }

   
  

  <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>

Solution

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>

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}`;
});

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>