本文介绍如何将搜索关键词通过 url 参数传递到新页面，并在目标页面中动态获取参数、调用 api 渲染电影列表，避免 localstorage 或错误跳转导致的失效问题。
在单页应用逻辑不适用的静态 HTML 环境中（如纯前端部署），直接在 index.html 中执行 API 请求并渲染结果，无法自然延续到另一个独立 HTML 页面（如 movies.html）。这是因为每个 HTML 文件是独立的执行上下文，localStorage 虽可跨页通信，但易受隐私策略（如第三方 Cookie 限制）、手动清缓存或同源策略干扰；而 window.location.href 若未正确触发或被 event.preventDefault() 阻止，则跳转失败——这正是原代码中点击无响应的根本原因。
✅ 正确方案：利用 URL 查询参数（Query String）实现轻量、可靠、无状态的跨页数据传递。
✅ 第一步：在首页（index.html）仅做跳转，不请求 API
移除首页中冗余的 main() 调用和 localStorage 操作，改为将搜索词拼接为 URL 参数后跳转：
⚠️ 注意：使用 encodeURIComponent() 对用户输入编码，防止空格、特殊字符（如 &, =）破坏 URL 结构；同时添加 required 和 trim() 校验，提升健壮性。
✅ 第二步：在结果页（movies.html）解析参数并渲染
movies.html 保持结构简洁，只保留容器与脚本：
Movies Search Results
✅ 关键优势与注意事项
- 零依赖、高兼容：无需服务端，纯前端即可运行，适配所有现代浏览器；
- SEO 友好：URL 包含语义化参数（如 movies.html?value=avengers），利于调试与分享；
- 错误防御完善：检查参数是否存在、API 响应状态、Poster 是否为 "N/A" 并提供占位图；
- 安全规范：始终对用户输入进行 encodeURIComponent() 编码，防范 XSS 风险（尽管此处用于 URL，非 DOM 插入，但仍属最佳实践）；
- 命名一致性：确保跳转目标文件名与实际文件一致（如示例中为 movies.html，而非 movieList.html），避免 404。
通过这种“跳转传参 + 页面自驱动”的模式，你既解耦了搜索入口与结果展示，又保证了流程清晰、调试直观、维护成本低——这才是静态站点中跨页传递搜索结果的专业实践。
