本地存储在调用时不删除数组中的对象，使用 localStorage.remove 方法

Question

我正在构建一个电影观看列表，将电影存储在我的本地存储中，并删除它们。这是我的代码的两个 CodePens，一个用于搜索和添加：

https://codepen.io/vanessalearnsjavascript/pen/vYVJPgm?editors=0011

另一个是删除的“监视列表”页面：

https://codepen.io/vanessalearnsjavascript/pen/YzJEQEW?editors=0011

    removeMovieButton.addEventListener("click", function() {
      watchList.splice(watchList.indexOf(movie), 1);
      movieDiv.parentNode.removeChild(movieDiv);
      localStorage.removeItem("movie" + watchList.indexOf(movie));
    });

在 WatchList 页面上，我设置了一个“删除电影”按钮，可以从数组和 DOM 中删除电影，但它的本地存储不起作用。这是 removeMovie 按钮，其中包含未执行的本地存储行。我可以按下按钮，它将项目从数组和 DOM 中删除，但是当我打开本地存储时，它仍然存在。

任何人都可以解释我如何解决这个问题以及为什么会这样吗？谢谢。

Answer 1

你只需更改执行顺序，所以替换这个

 removeMovieButton.addEventListener("click", function() {
      watchList.splice(watchList.indexOf(movie), 1); // <-------- 1
      movieDiv.parentNode.removeChild(movieDiv);
      localStorage.removeItem("movie" + watchList.indexOf(movie)); // <------ 2
    });

by

 removeMovieButton.addEventListener("click", function() {
      localStorage.removeItem("movie" + watchList.indexOf(movie)); // < ---- 2
      movieDiv.parentNode.removeChild(movieDiv);
      watchList.splice(watchList.indexOf(movie), 1);// < ---- 1
    });

解释： 你正在从数组中删除电影然后你得到一个错误的“已经”删除项目的索引以将其从 localStorage 中删除，这就是它对你不起作用的原因。

Answer 2

为什么不起作用？您删除该项目，然后尝试再次找到该项目。删除后你会找到它吗？

removeMovieButton.addEventListener("click", function() {
      watchList.splice(watchList.indexOf(movie), 1); <-- You remove the entry
      movieDiv.parentNode.removeChild(movieDiv);
      localStorage.removeItem("movie" + watchList.indexOf(movie)); <-- you look for it again
    });

现在您可以将索引存储到变量中，但是当您删除索引时，所有其他条目都会向下移动一个。所以这意味着数组中的

movie4

将位于索引 3，而不是 4。因此您必须调整所有本地存储键。

只需存储数组！

watchList.splice(watchList.indexOf(movie), 1);
localStorage.setItem('watchList', JSON.stringify(watchList));

需要看表的时候就看

watchList = JSON.parse(localStorage.getItem('watchList') || '[]');

Answer 3

基本上

localStorage

是一个全局变量，当浏览器重新加载时它不会消失。也可以用于选项卡之间的通信

let data = { name: 'luci', age: 26 }

// localStorage.setItem(str)
localStorage.globalObj = JSON.stringify(data)

// localStorage.getItem(str)
console.log(localStorage.globalObj) // {"name":"luci","age":26}
let _data = JSON.parse(localStorage.globalObj)
delete _data.age

localStorage.globalObj = JSON.stringify(_data)
console.log(localStorage.globalObj) // {"name":"luci"}