一次尝试制作一部讨人喜欢的电影

Question

我试图通过将电影存储在这样的数组中来让电影变得讨人喜欢：

let likedMovies = [];
const movieLike = document.getElementById("likeButton");
likedMovies = JSON.parse(localStorage.getItem("likedMovies"));
movieLike.addEventListener("click", () => {
  if (likedMovies.indexOf(allMovies[i].name) === -1) {
    confirm("Movie liked");
    axios.patch(`url`);
    likedMovies.push(allMovies[i].name);
    localStorage.setItem("likedMovies", JSON.stringify(likedMovies));
    return true;
  }
  confirm("Movie already liked");
  return false;
});

它在今天下午工作，但现在控制台显示一条错误日志，上面写着：“script.js:75 未捕获的类型错误：无法读取 null 的属性（读取 'indexOf'）在 HTMLDivElement。”并且当我记录我的 likedMovies 数组时，它说该数组为“空”，你能帮我理解为什么它不起作用吗？

Answer 1

问题是您正在使用 JSON.parse 的结果重新分配 likedMovies，如果无法解析它，则结果为 null。

let likedMovies = JSON.parse(localStorage.getItem("likedMovies")) || [];

这应该可以解决错误，但您也可以通过将其存储为对象来进行一些优化。

let likedMovies = JSON.parse(localStorage.getItem("likedMovies")) || {};
const movieLike = document.getElementById("likeButton");
movieLike.addEventListener("click", () => {
  if (likedMovies[allMovies[i].name]) {
    confirm("Movie liked");
    axios.patch(`url`);
    likedMovies[allMovies[i].name] = true;
    localStorage.setItem("likedMovies", JSON.stringify(likedMovies));
    return true;
  }
  confirm("Movie already liked");
  return false;
});

现在您的搜索将不会在 O(n) 的线性时间内发生，而是在常量 O(1) 内发生。微小的性能改进。

一次尝试制作一部讨人喜欢的电影

Trying to make a movie likeable one time

javascript

storage

local-storage