如何從本地存儲中刪除書簽元素

Question

我正在制作一個用於為字符添加書簽的應用程序。 我必須將書簽字符存儲在本地存儲中，因此當我刷新頁面時，我可以看到我的書簽元素。

我的元素已正確保存到本地存儲中，但是當我刷新頁面時，書簽圖標的 state 未保存（盡管元素仍在本地存儲中，但它被放回未填充的圖標上）

第二個問題是我不知道如何實現從本地存儲中刪除書簽元素。 我想取消標記特定元素並從本地存儲中刪除該元素。 您可以在我的 handleBookmarking function 中看到我是如何添加書簽的，但我不知道如何使用雙向 function 來添加書簽和取消書簽。 有什么想法嗎？

這是代碼：

CharactersList.js

import React, { useState } from "react";
import "./CharactersList.css";
import { RiBookmarkLine } from "react-icons/ri";
import { RiBookmarkFill } from "react-icons/ri";

const CharactersList = (props) => {
  const [isLiked, setIsLiked] = useState([]);
  const [favourites, setFavourites] = useState([]);

  const saveToLocalStorage = (data) => {
    localStorage.setItem("react-bookmarked-characters", JSON.stringify(data));
  };

  const handleBookmarking = (character) => {
    if (isLiked.includes(character.id)) {
      const newIsLiked = [...isLiked];
      setIsLiked(newIsLiked);
    } else {
      setIsLiked([...isLiked, character.id]);
      const newBookmarkedList = [...favourites, character];
      setFavourites(newBookmarkedList);
      saveToLocalStorage(newBookmarkedList);
      
    }
  };

  const Bookmarked = ({ id }) => {
    return isLiked.includes(id) ? <RiBookmarkFill /> : <RiBookmarkLine />;
  };
  
  return (
    <>
      {props.characters.map((character, index) => (
        <div className="card-container" key={index}>
          <img
            src={`${character.thumbnail.path}/standard_fantastic.${character.thumbnail.extension}`}
            alt="character"
            className="image"
          />
          <div className="info-container">
            <p className="name">{character.name}</p>
            <div
              className="icon"
              onClick={() => {
                handleBookmarking(character);
              }}
            >
              <Bookmarked id={character.id} />
            </div>
          </div>
        </div>
      ))}
    </>
  );
};

export default CharactersList;

App.js所以在 app.js 中我調用了兩個字符列表，一個是當搜索輸入為空時（顯示所有書簽元素），第二個是在搜索中（顯示所有元素）。

const App = () => {
  const [characters, setCharacters] = useState([]);
  const [search, setSearch] = useState("");
  const [favourites, setFavourites] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [characterPerPage] = useState(20);

  const getCharactersRequest = async () => {
    const url = `https://gateway.marvel.com/v1/public/characters?nameStartsWith=${search}&ts=1&apikey=&hash=`; 
    const response = await fetch(url);
    const responseJSON = await response.json();

    if (responseJSON.data) {
      setCharacters(responseJSON.data.results);
    }
  };

  useEffect(() => {
    getCharactersRequest(search);
  }, [search]);

  useEffect(() => {
    const bookMarkedData = JSON.parse(
      localStorage.getItem("react-bookmarked-characters")
    );
    if (bookMarkedData) {
      setFavourites(bookMarkedData);
    }
  }, [search]);

  // Get 20 posts
  const indexOfLastCharacter = currentPage * characterPerPage;
  const indexOfFirstCharacter = indexOfLastCharacter - characterPerPage;
  const slicedFavourites = favourites.slice(
    indexOfFirstCharacter,
    indexOfLastCharacter
  );

  return (
    <div>
      <div className="heading-container">
        <SearchBarHeading heading={"MARVEL CHARACTERS"} />
        <SearchBar search={search} setSearch={setSearch} />
      </div>

      <div className="cards-container">
        {search === "" ? (
          <CharactersList characters={slicedFavourites} />
        ) : (
          <CharactersList characters={characters} />
        )}
      </div>
    </div>
  );
};

export default App;

Answer 1

如果要從本地存儲中刪除特定項目，步驟 1：從本地存儲中獲取數據步驟 2：根據需要修改數據步驟 3：將數據存儲回本地存儲

前任：-

data = [1, 2, 3, 4, 5]
 
 localStorage.setItem("react-bookmarked-characters", JSON.Stringify(data)) // [1,2,3,4,5]

 data = JSON.parse(localStorage.getItem("react-bookmarked-characters"))

 newData = data.splice(1,1)

 localStorage.setItem("react-bookmarked-characters", JSON.Stringify(newData)) // [1,3,4,5]

要刪除完整的本地存儲，您可以這樣做

localStorage.removeItem("react-bookmarked-characters")

Answer 2

這是我將如何解決它。

首先要做的是讀取保存的書簽並將它們設置為組件的初始 state。

然后，我會使用 React.useEffect 來保存書簽 state，只要 state 發生變化。

最后，我會稍微清理一下您的 onClick 處理程序，以處理書簽 ID 的切換。

import React, { useState } from 'react';
import './CharactersList.css';
import { RiBookmarkLine } from 'react-icons/ri';
import { RiBookmarkFill } from 'react-icons/ri';

const StorageKey = 'react-bookmarked-characters';

const CharactersList = (props) => {
  const initialState = JSON.parse(window.localStorage.getItem(StorageKey)) ?? [];
  const [bookmarks, setBookmarks] = useState(initialState);

  React.useEffect(() => {
    window.localStorage.setItem(StorageKey, JSON.stringify(bookmarks));
  }, [bookmarks]);

  const handleLikeChange = (character) => {
    setBookmarks((prevBookmarks) => {
      if (prevBookmarks.includes.character.id) {
        return prevBookmarks.filter((id) => id === character.id);
      }
      return [...prevBookmarks, character.id];
    });
  };

  return props.characters.map((character) => (
    <Character
      key={character.index}
      character={character}
      bookmarked={bookmarks.includes(character.id)}
      onToggleBookmark={handleLikeChange}
    />
  ));
};

const Character = ({ character, bookmarked, onToggleBookmark }) => {
  const handleClick = () => onToggleBookmark(character);

  return (
    <div className="card-container" key={character.index}>
      <img
        src={`${character.thumbnail.path}/standard_fantastic.${character.thumbnail.extension}`}
        alt="character"
        className="image"
      />
      <div className="info-container">
        <p className="name">{character.name}</p>
        <div className="icon" onClick={handleClick}>
          {bookmarked ? <RiBookmarkFill /> : <RiBookmarkLine />}
        </div>
      </div>
    </div>
  );
};

export default CharactersList;