表单中的目标输入值，提交表单后存储在 localStorage 中，并将该值用于 omdbapi

Question

我想在单击

search

按钮后获取输入字段中的值并将其设置在

localStorage

中，然后将其存储在

searchKey

变量中并将其传递到

main()

中以在 omdbapi 中搜索电影。

我尝试在表单中使用

onsubmit

并传入

browse(event)

来查看是否可以获取输入字段中的值。但是，当我

console.log(event.target.value)

单击

search

按钮后，输入值未显示。

    const movieListEl = document.querySelector('.shows');
    const searchKey = localStorage.getItem("key");
    
    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();
        // console.log(data.Search)
        movieListEl.innerHTML = data.Search.map((movie) => movieHTML(movie)).join("");
    
    }

    main(searchKey);

   function browse(event){
        event.preventDefault();
        console.log(event.target.value);
        localStorage.setItem("key", event.target.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>
        `
    }
    
    
   
        
     

   

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