页面刷新后Local Storage数据无法持久化显示的问题求助

你的问题核心是：只有点击保存按钮时才会渲染本地存储的电影列表，页面刷新后没有主动读取Local Storage并执行渲染逻辑，所以历史数据存在但不会自动展示。

修改方案： #

1. 把渲染电影列表的逻辑抽成独立函数，方便复用
2. 页面加载完成时自动调用这个函数，读取本地存储并渲染

修改后完整代码： #

// 提取渲染已保存电影的独立函数
function renderSavedMovies() {
  // 读取本地存储，没有数据则默认空数组
  var movieHistArr = JSON.parse(localStorage.getItem("savedMovieObj")) || [];
  $("#myList").empty();
  
  for (var i = 0; i < movieHistArr.length; i++) {
    // 修复class属性的语法错误（原代码引号位置不对）
    var storedMovieEl = $('<li class="text-slate-400">');
    storedMovieEl.text(movieHistArr[i].Title);
    $("#myList").append(storedMovieEl);
  }
}

// 页面加载完成后立即渲染已保存的电影
$(document).ready(function() {
  renderSavedMovies();
});

// 保存按钮点击事件
$("#saveButton").on("click", function() {
  savedMovieObj = {
    Title: tmdbMovieData.results[currentMovieIndex].title,
    Release: tmdbMovieData.results[currentMovieIndex].release_date,
    Overview: tmdbMovieData.results[currentMovieIndex].overview,
    Stars: tmdbMovieData.results[currentMovieIndex].vote_average / 2,
    Poster: tmdbMovieData.results[currentMovieIndex].poster_path,
    VideoID: globalVideoId,
  };

  var movieHistArr = JSON.parse(localStorage.getItem("savedMovieObj")) || [];

  var hasMovie = movieHistArr.find(function(movie) {
    return movie.Title === savedMovieObj.Title;
  });

  if (!hasMovie) {
    movieHistArr.push(savedMovieObj);
  }

  localStorage.setItem("savedMovieObj", JSON.stringify(movieHistArr));
  
  // 调用渲染函数更新列表
  renderSavedMovies();
});

关键改动说明： #

• 抽离渲染函数：将原本写在点击事件里的渲染逻辑单独封装，避免代码重复，同时让页面加载时可以直接调用
• 页面初始化渲染：通过$(document).ready()在页面DOM加载完成后立即执行渲染，确保刷新后能自动展示历史数据
• 修复语法错误：原代码中<li class= text-slate-400 ">的引号位置错误，会导致样式失效，修改为标准的class="text-slate-400"
• 简化空数组判断：用|| []替代原本的if (!movieHistArr)判断，代码更简洁清晰

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