如何将TMDB API获取的电影数据传递至watchlist.html页面

先修复原搜索函数的细节错误 #

原代码存在几处影响功能的问题，先修正：

1. TMDB返回的电影ID字段是movie.id，不是movie.movie_id
2. 电影跳转链接的href引号未闭合，导致跳转失效
3. 给"Add to watchlist"按钮绑定点击事件，用来传递电影数据

修正后的searchMovie函数：

const searchMovie = async (searchInput) => {
  try { 
    const response = await axios.get(`https://api.themoviedb.org/3/search/movie?api_key={API_KEY}&language=en-US&query=${searchInput}&page=1&include_adult=false`);
    let movies = response.data.results;
    let displayMovies = '';
    
    $.each(movies, (index, movie) => {
      // 将电影数据转为JSON字符串，存入按钮的自定义属性中
      const movieData = JSON.stringify(movie);
      displayMovies += `
      <div class="col-md-3">
        <div class="well text-center">
          <a href="https://www.themoviedb.org/movie/${movie.id}" target="_blank">
            <img src="https://image.tmdb.org/t/p/w300${movie.poster_path}" alt="${movie.title}">
          </a>
          <h5>${movie.title}</h5>
          <h6>${movie.release_date || '暂无上映日期'}</h6>
          <button class="btn btn-primary add-to-watchlist" data-movie="${movieData}">Add to watchlist</button>
        </div>
      </div>
      `;
    });
    
    $('#movies').html(displayMovies);
    
    // 绑定添加按钮的点击事件
    $('.add-to-watchlist').on('click', function() {
      const movie = JSON.parse($(this).data('movie'));
      addToWatchlist(movie);
      alert('已添加到收藏清单');
    });
  } catch(error) {
   console.log(error);
  }
}

// 封装添加到收藏的逻辑
function addToWatchlist(movie) {
  // 从localStorage读取现有收藏列表，无数据则为空数组
  let watchlist = JSON.parse(localStorage.getItem('movieWatchlist')) || [];
  
  // 避免重复添加同一部电影
  const isDuplicate = watchlist.some(item => item.id === movie.id);
  if (!isDuplicate) {
    watchlist.push(movie);
    // 将更新后的列表存回localStorage
    localStorage.setItem('movieWatchlist', JSON.stringify(watchlist));
  }
}

在watchlist.html中渲染收藏清单 #

在watchlist.html里添加以下代码，读取localStorage中的收藏数据并渲染页面：

<!-- watchlist.html的核心结构 -->
<div class="container">
  <h2>我的收藏清单</h2>
  <div id="watchlist-movies" class="row"></div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  renderWatchlist();
});

// 渲染收藏列表
function renderWatchlist() {
  const watchlist = JSON.parse(localStorage.getItem('movieWatchlist')) || [];
  let displayHtml = '';
  
  if (watchlist.length === 0) {
    displayHtml = '<p class="text-center">收藏清单为空</p>';
  } else {
    $.each(watchlist, (index, movie) => {
      displayHtml += `
      <div class="col-md-3">
        <div class="well text-center">
          <a href="https://www.themoviedb.org/movie/${movie.id}" target="_blank">
            <img src="https://image.tmdb.org/t/p/w300${movie.poster_path}" alt="${movie.title}">
          </a>
          <h5>${movie.title}</h5>
          <h6>${movie.release_date || '暂无上映日期'}</h6>
          <button class="btn btn-danger remove-from-watchlist" data-id="${movie.id}">移除</button>
        </div>
      </div>
      `;
    });
  }
  
  $('#watchlist-movies').html(displayHtml);
  
  // 绑定移除按钮的点击事件
  $('.remove-from-watchlist').on('click', function() {
    const movieId = parseInt($(this).data('id'));
    removeFromWatchlist(movieId);
    renderWatchlist(); // 重新渲染列表
  });
}

// 移除收藏的电影
function removeFromWatchlist(movieId) {
  let watchlist = JSON.parse(localStorage.getItem('movieWatchlist')) || [];
  // 过滤掉要移除的电影
  watchlist = watchlist.filter(item => item.id !== movieId);
  localStorage.setItem('movieWatchlist', JSON.stringify(watchlist));
}
</script>

方案说明 #

• 采用localStorage存储收藏数据：无需后端支持，静态页面即可实现，数据会保存在用户浏览器中（除非用户手动清除缓存）
• 核心流程：
  1. 搜索页点击添加按钮时，将电影数据转为JSON字符串存入localStorage
  2. 收藏页加载时读取localStorage数据，渲染电影列表
  3. 支持移除功能，通过电影ID过滤数组后更新localStorage

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