在本地存储中存储对象属性

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”属性设置为与该值相反的值（真或假），如果为真，则填充心形图标，如果为假，则心只是勾勒出来的。

我想将“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() 返回一个数组，这就是“liked_by_user”属性未定义的原因。

试试这个：

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

在这里，您将提取数组的第一个元素，该元素是具有 like_by_user 属性的对象。

注意：如果数组为空，它会抛出一个错误，所以你可能需要添加一个检查。