观影清单应用：本地存储的电影对象无法渲染至HTML页面

问题背景 #

我正在开发一款观影清单应用，用jQuery从API获取数据并渲染到HTML页面。搜索电影的功能正常，但点击「Add to watchlist」按钮把电影存入localStorage后，无法将存储的数据渲染到页面上。

搜索电影并渲染的代码 #

const searchMovie = async (searchInput) => {
  try {
    const results = await obtainData(searchInput);
    let displayMovies;
    $.each(results, (index, { id, title, poster_path, release_date }) => {
      displayMovies += `
        <div class="col-md-3"> 
        <div class="well text-center">
        <img src="https://image.tmdb.org/t/p/original${poster_path}"></a>
          <h4>${title}</h4>
          <h5>${release_date}</h5>
          <h6 hidden>${id}</h6>
          <button class="btn btn-primary" id = "add-button" type="button">Add to watchlist</button>
        </div>
      </div>
        `;
    });
 $('#movies').html(displayMovies);
}

尝试渲染localStorage数据的代码 #

数据已成功存入localStorage，但以下渲染函数无法正常工作：

var data = localStorage.getItem('movieInWatch');
if (data) {
    data = JSON.parse(data);
    console.log(data);

  $.each(data, (index, { id, title, posterPath, releaseDate }) => {
    $('#selected-movie').append(`
<div class="col-md-3"> 
  <div class="well text-center">
    <img src="${posterPath}">
    <h4>${title}</h4>
    <h5>${releaseDate}<h5>
    <h6 hidden>${id}</h6>
  </div>
</div>
    `);
});
}

localStorage中的数据结构 #

存储的movieInWatch是一个数组，每个电影对象的键名是：id、title、poster_path、release_date（而非渲染代码中使用的驼峰式posterPath、releaseDate）。

问题原因及修复方案 #

1. 键名不匹配：渲染代码里用了posterPath、releaseDate，但localStorage存的是poster_path、release_date，解构赋值时键名对应不上，导致拿不到数据。
2. HTML标签错误：搜索代码里<img>标签多了个</a>闭合标签；渲染代码里<h5>${releaseDate}没正确闭合，写成了<h5>而非</h5>。
3. 图片路径可能缺失前缀：如果存储时只存了poster_path的后缀，渲染时需要补全TMDB的图片域名前缀。

修复后的渲染代码 #

var data = localStorage.getItem('movieInWatch');
if (data) {
    data = JSON.parse(data);
    console.log(data);

  $.each(data, (index, { id, title, poster_path, release_date }) => {
    // 补全图片完整路径（如果存储时只存了后缀）
    const fullPosterUrl = `https://image.tmdb.org/t/p/original${poster_path}`;
    $('#selected-movie').append(`
<div class="col-md-3"> 
  <div class="well text-center">
    <img src="${fullPosterUrl}">
    <h4>${title}</h4>
    <h5>${release_date}</h5>
    <h6 hidden>${id}</h6>
  </div>
</div>
    `);
});
}

额外优化点 #

• 搜索代码里初始化displayMovies为空字符串：let displayMovies = '';，避免拼接时开头出现undefined
• 移除搜索代码中多余的</a>标签，修正为<img src="https://image.tmdb.org/t/p/original${poster_path}">

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