如何使用localStorage将API获取的电影数据传递至另一个HTML文件

核心问题梳理 #

• 动态生成的按钮无法绑定点击事件（直接绑定仅对初始DOM生效）
• 所有添加按钮使用同一ID，导致元素选择冲突
• 未正确获取当前点击的电影数据
• localStorage仅存储单条数据，且观影清单页面未将生成的HTML插入DOM

修复步骤与代码修改 #

1. 修正按钮标识与事件绑定逻辑

将重复的id="add-movie-button"改为class="add-movie-button"，并通过事件委托绑定点击事件（支持动态生成的元素）。同时在按钮上通过data-movie属性存储当前电影的完整数据，方便点击时获取。

修改搜索结果渲染代码中的按钮部分：

// 在searchMovie函数的$.each循环内，替换按钮代码
<a class="btn btn-primary add-movie-button" href="#" data-movie='${JSON.stringify(movie)}'>Add to watchlist</a>

替换原点击事件绑定代码：

// 事件委托处理动态按钮点击
$('#movies').on('click', '.add-movie-button', function(e) {
  e.preventDefault(); // 阻止默认锚点跳转
  
  // 从data属性解析当前电影数据
  const movie = JSON.parse($(this).data('movie'));
  
  // 获取已有观影清单，无则初始化空数组
  let watchlist = JSON.parse(localStorage.getItem('watchlist')) || [];
  
  // 检查电影是否已存在，避免重复添加
  const isDuplicate = watchlist.some(item => item.id === movie.id);
  if (!isDuplicate) {
    watchlist.push({
      id: movie.id, // 用电影ID做唯一标识
      poster: movie.poster_path,
      title: movie.title,
      releaseDate: movie.release_date
    });
    localStorage.setItem('watchlist', JSON.stringify(watchlist));
  }
});

2. 优化searchMovie函数

修复冗余的async/then混用问题，同时修正img标签的多余闭合标签：

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`);
    const movies = response.data.results;
    let displayMovies = '';
    
    $.each(movies, (index, movie) => {
      displayMovies += `
      <div class="col-md-3">
        <div class="well text-center">
          <img src="https://image.tmdb.org/t/p/original${movie.poster_path}" alt="${movie.title}">
          <h5>${movie.title}</h5>
          <h4>${movie.release_date}</h4>
          <a class="btn btn-primary add-movie-button" href="#" data-movie='${JSON.stringify(movie)}'>Add to watchlist</a>
        </div>
      </div>
      `;
    });
    
    $('#movies').html(displayMovies);
  } catch (error) {
    console.error('搜索失败:', error);
  }
};

3. 修正watchlist.html的渲染逻辑

将存储的电影数组遍历渲染，并将HTML插入页面容器：

// watchlist.html页面加载时渲染清单
$(document).ready(() => {
  const watchlist = JSON.parse(localStorage.getItem('watchlist')) || [];
  const container = $('#watchlist'); // 确保页面存在id为watchlist的容器
  let htmlContent = '';
  
  if (watchlist.length > 0) {
    watchlist.forEach(movie => {
      htmlContent += `
      <div class="col-md-3">
        <div class="well text-center">
          <img src="https://image.tmdb.org/t/p/original${movie.poster}" alt="${movie.title}">
          <h5>${movie.title}</h5>
          <h4>${movie.releaseDate}</h4>
        </div>
      </div>
      `;
    });
  } else {
    htmlContent = '<p class="text-center">观影清单为空，快去添加电影吧！</p>';
  }
  
  container.html(htmlContent);
});

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