当我从localStorage中删除书签数据并关闭我的网站选项卡或关闭Chrome浏览器时，当我再次访问我的网站时，为什么还有一个数据是我最近删除的数据。
我的代码是这样的
const [bookmark, setBookmark] = useState([]);
const addToBookmark = (ayatLs) => {
setBookmark([...bookmark, ayatLs]);
};
const removeBookmark = (bookmarkToRemove) => {
setBookmark(bookmark.filter((x) => x !== bookmarkToRemove));
};
useEffect(() => {
if (bookmark.length === 0) return;
localStorage.setItem('bookmark', JSON.stringify(bookmark));
}, [bookmark]);
useEffect(() => {
const bookmarkFromLocalStorage = localStorage.getItem('bookmark');
const parsedBookmark =
bookmarkFromLocalStorage !== null
? JSON.parse(bookmarkFromLocalStorage)
: [];
setBookmark(parsedBookmark);
}, []);
2条答案
按热度按时间tp5buhyn1#
问题出在您的“更新”
useEffect上。如果从
bookmark数组中删除Item，代码将执行以下操作：假设
bookmark数组中有两个元素，那么：bookmark.length === 2本地存储中有两个项目，然后运行
removeBookmark，数组get只复制了一个元素第一个useEffect由更新后的
bookmark变量触发，新数组（长度为1，右）写入localStorage。现在运行
bookmark.length === 1，然后再次运行removeBookmark。bookmark数组现在是空的，所以bookmark.length === 0，所以if语句if (bookmark.length === 0) return;使它不再对localStorage进行更改，因此最后一项永远不会被删除，并且localStorage数组中仍然有一项。如果您将useEffect更改为以下内容：
删除最后一项时，localStorage中应该只有一个空数组。
6rqinv9w2#
这里你使用useEffect设置localstorage中的数据。一旦在localstorage中设置了该值，它将一直保留在那里，直到没有使用localStorage.removeItem（“key”）手动删除它为止;。此处从bookmark中删除值无效。
您需要使用**.removeItem（'key'）来执行此操作。执行此操作将从localstorage中删除整个值。因此，您必须在localstorage**中重新存储这些值。