如何在JavaScript文件间访问变量？电影网站跨页API调用需求

方法1：通过URL参数传递电影名称 #

这是最直接常用的方式，跳转时把电影名称编码后作为URL参数携带，详情页解析URL获取参数即可。

原页面（电影列表页）跳转代码：

// 假设movieTitle是你要传递的电影名称变量
const movieTitle = "星际穿越";
// 点击卡片时触发跳转，用encodeURIComponent处理特殊字符
document.querySelector('.movie-card').addEventListener('click', () => {
  window.location.href = `movie.html?title=${encodeURIComponent(movieTitle)}`;
});

movie.html页面脚本：

// 解析URL中的查询参数
const urlParams = new URLSearchParams(window.location.search);
const movieTitle = urlParams.get('title');

// 验证参数后调用OMDB API
if (movieTitle) {
  // 替换成你的OMDB API密钥
  const apiKey = "你的API密钥";
  fetch(`https://www.omdbapi.com/?t=${encodeURIComponent(movieTitle)}&apikey=${apiKey}`)
    .then(response => response.json())
    .then(movieData => {
      // 动态更新页面内容，示例：
      document.getElementById('movie-title').textContent = movieData.Title;
      document.getElementById('movie-year').textContent = movieData.Year;
      document.getElementById('movie-poster').src = movieData.Poster;
      // 其他详情字段同理更新
    })
    .catch(error => console.error("获取电影详情出错：", error));
}

方法2：用localStorage临时存储 #

如果不想在URL中暴露电影名称，可使用localStorage临时存储数据，详情页读取后立即删除避免残留。

原页面跳转代码：

const movieTitle = "星际穿越";
document.querySelector('.movie-card').addEventListener('click', () => {
  localStorage.setItem('targetMovieTitle', movieTitle);
  window.location.href = 'movie.html';
});

movie.html页面脚本：

const movieTitle = localStorage.getItem('targetMovieTitle');
// 读取后立即删除，防止下次打开页面获取旧数据
localStorage.removeItem('targetMovieTitle');

if (movieTitle) {
  // 调用OMDB API并更新页面逻辑同方法1
}

两种方式对比 #

• URL参数：简单直观，支持页面刷新和分享，但电影名称会暴露在地址栏，适合无敏感信息的场景。
• localStorage：不会暴露在URL，但需要手动清理数据，避免多标签页或重复打开时的冲突。

内容的提问来源于stack exchange，提问作者rahul4019