如何将页面Div与LocalStorage数组项关联并实现点击同步删除

核心问题 #

当前代码无法将DOM中的电影Div与LocalStorage里的watchList数组项关联，导致删除DOM元素后，刷新页面数据又恢复。

解决步骤 #

1. 渲染DOM时绑定电影ID
   在渲染电影卡片的HTML时，给.movie元素添加data-imdbid属性，值为电影的IMDb ID（从OMDb API返回的movie.imdbID字段），这样点击时就能直接获取对应ID：

fetch(`https://www.omdbapi.com/?i=${movies[i]}&apikey=123`)
  .then(res => res.json())
  .then(movie => {
    containerList.innerHTML += `
      <div class="movie" data-imdbid="${movie.imdbID}">
        <!-- 电影封面、标题等内容 -->
        <button class="watchlist">从收藏移除</button>
      </div>
    `;
  });

2. 修改点击事件逻辑
   点击删除按钮时，先获取对应电影的ID，再从LocalStorage的数组中移除该项，最后更新LocalStorage并删除DOM元素：

containerList.addEventListener("click", (e) => {
  if (e.target.matches(".watchlist")) {
    const movieDiv = e.target.closest(".movie");
    const targetMovieId = movieDiv.dataset.imdbid;

    // 读取并解析LocalStorage中的watchList数组
    let watchList = JSON.parse(localStorage.getItem("watchList")) || [];
    // 过滤掉要删除的电影ID
    watchList = watchList.filter(id => id !== targetMovieId);
    // 将更新后的数组存回LocalStorage
    localStorage.setItem("watchList", JSON.stringify(watchList));

    // 删除DOM元素
    movieDiv.remove();
  }
});

关键说明 #

• data属性的作用：通过data-imdbid把DOM元素和LocalStorage中的电影ID建立关联，是解决问题的核心。
• LocalStorage操作注意事项：LocalStorage只能存储字符串，所以必须用JSON.parse()解析数组，修改后用JSON.stringify()转回字符串再存储。不能直接调用localStorage.removeItem()，这会删除整个watchList键，而非数组中的某一项。

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