JavaScript中动态生成的数组无法存入localStorage问题

核心问题：异步执行顺序错误 #

你遇到的问题是异步操作的执行顺序导致的：

• fetch 属于异步网络请求，它的回调逻辑（.then 内部代码）要等请求完成后才会执行，但你在调用 showMovies(apiUrl) 后立刻执行了 localStorage.setItem('test', JSON.stringify(arr))——这时候 arr 要么刚被重置为空数组，要么还没来得及被填充任何数据，所以存入本地存储的自然是空数组。
• 另外，用户点击收藏按钮往 arr 里添加数据的操作，发生在你执行存储代码之后，这部分动态添加的数据也不会被存入。

修复方案 #

1. 调整存储时机，同步响应用户操作 #

把存储操作放到收藏按钮的点击回调里，每次用户添加/取消收藏时，立刻更新本地存储：

// 把点击事件移到全局，仅绑定一次（避免重复绑定）
main.addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.matches(".fav")) {
    const movieTitle = tgt.closest("div").querySelector("h2.title").textContent;
    console.log(movieTitle);
    
    // 处理单选/多选逻辑（当前是单选框，只能选一个）
    arr = [movieTitle]; // 单选模式下直接替换数组内容
    // 如果改成多选（把input type改成checkbox），可以用以下逻辑：
    // if(tgt.checked) {
    //   !arr.includes(movieTitle) && arr.push(movieTitle);
    // } else {
    //   arr = arr.filter(item => item !== movieTitle);
    // }
    
    localStorage.setItem('test', JSON.stringify(arr));
  }
})

2. 页面初始化时恢复本地存储数据 #

如果需要刷新页面后保留之前的收藏记录，要在页面加载时从本地存储读取数据初始化 arr：

// 初始化数组，优先读取本地存储，没有则为空数组
let arr = JSON.parse(localStorage.getItem('test')) || [];

// 原有的showMovies函数里，移除对arr的重置（避免清空本地存储的数据）
function showMovies(url) {
  // 移除 arr = []; 这一行
  main.innerHTML = ""; // 清空旧内容，避免重复渲染
  fetch(url)
    .then((res) => res.json())
    .then(function (data) {
      console.log(data.results);
      data.results.forEach((element) => {
        // 保留原有的DOM创建逻辑
      });
      // 移除原来在这里绑定的点击事件
    });
}

3. 修复重复绑定事件的问题 #

原代码每次调用 showMovies 都会给 main 绑定一次点击事件，多次搜索后会导致同一个点击触发多次逻辑，所以必须把点击事件绑定移到全局，只执行一次。

额外优化提示 #

• 当前用的是单选框(type="radio")，用户只能选择一个收藏电影，如果需要支持多选，把 fav.setAttribute("type", "radio") 改成 type="checkbox"，同时调整数组的添加/移除逻辑。
• 可以在渲染电影卡片时，根据本地存储的 arr 数据，自动勾选已收藏的按钮，提升用户体验。

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