试图让一部电影变得讨人喜欢答案

【问题标题】：Trying to make a movie likeable one time试图让一部电影变得讨人喜欢
【发布时间】：2022-01-13 16:53:46
【问题描述】：

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

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 Uncaught TypeError: Cannot read properties of null (reading 'indexOf') 在 HTMLDivElement。”，当我记录我的 likeMovies 数组时，它说数组的“null”，你能帮我理解为什么它不起作用吗？

【问题讨论】：

如果用户打开不同的浏览器，用户还能再点赞吗？我认为这需要后端处理，并且通过不更新“喜欢”来简单地限制前端
你是如何在 localStorage 上设置 likeMovies 的？
很明显likedMovies 已经不在localStorage 中了。
@FaizalHussain with localStorage.setItem("likedMovies", JSON.stringify(likedMovies)) 在 if 中
@WaisKamal 我怎样才能把它放回去？

标签： javascript local-storage storage

【解决方案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) 中发生。微小的性能提升。

【讨论】：