在本地存储中存储 object 属性

Question

我有一个可以获取 30 张图像的应用程序，当您将鼠标悬停在图像上时，您可以通过单击出现的心形来“收藏”该图像。单击心脏时，此函数运行。

    //toggle favorited on and off
  const toggleFavorite = (id) => {
    const newArr = allPhotos.map((photo) => {
      if (photo.id === id) {
        return {
          ...photo,
          liked_by_user: !photo.liked_by_user,
        };
      }
      return photo;
    });
    setAllPhotos(newArr);
  };

当你点击这颗心时，上面的函数会获取照片并将“liked_by_user”属性设置为与值（真或假）相反的值，如果它是真的心形图标已填充，如果为 false，则仅勾勒出心形。

我想将“Liked_by_user” 属性存储在本地存储中，这样，如果刷新页面，图像“liked_by_user”仍将设置为 true，并且心形图标仍将归档。

我以前从未实现过 localStorage。

我认为我在正确的轨道上，当点击心形图标时，确实创建了本地存储，但它的值为“未定义”

注意 - 我所有的图像都存储在一个名为 AllPhotos

的数组中

      //toggle favorited on and off
  const toggleFavorite = (id) => {
    const newArr = allPhotos.map((photo) => {
      if (photo.id === id) {
        return {
          ...photo,
          liked_by_user: !photo.liked_by_user,
        };
      }
      return photo;
    });

    setAllPhotos(newArr);

*****issue below****
    let ImageToStore = newArr.filter((image) => image.id === id);
    localStorage.setItem("image", JSON.stringify(ImageToStore.liked_by_user));
  };

如有任何帮助，我们将不胜感激！

Answer 1

.filter() returns 一个数组，所以这就是为什么 "liked_by_user" 属性是未定义的。

试试这个：

let ImageToStore = newArr.filter((image) => image.id === id)[0];
localStorage.setItem("image", JSON.stringify(ImageToStore.liked_by_user))

在这里您要提取数组的第一个元素，该元素是将具有 liked_by_user 属性.

的对象

注意：如果数组为空，它会抛出错误，因此您可能需要为此添加检查。

在本地存储中存储 object 属性

Storing object property in local Storage

javascript

local-storage

reactjs