如何從 localstorage 獲取項目並將其呈現到我的列表中？

Question

我正在嘗試創建一個 Todo 列表，其中包含兩個名為“Title”和“Detail”的值。 到目前為止，我能夠在本地存儲中設置項目，但不確定如何從同一本地存儲中取回項目並將其呈現在列表中。

這是我的 TaskContext.js 組件：

import React, { createContext, useState, useEffect } from "react";
import uuid from "uuid/v1";

export const TaskContext = createContext();

const TaskContextProvider = props => {
  const [tasks, setTasks] = useState([
    { title: "name of the wind", detail: "patrick", id: 1 },
    { title: "Rich dad poor dad", detail: "wilson", id: 2 }
  ]);

  useEffect(() => {
    localStorage.setItem("tasks", JSON.stringify(tasks));
  }, [tasks]);

  const addTask = (title, detail) => {
    setTasks([...tasks, { title: title, detail: detail, id: uuid() }]);
  };

  const removeTask = id => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  return (
    <TaskContext.Provider value={{ tasks, addTask, removeTask }}>
      {props.children}
    </TaskContext.Provider>
  );
};

export default TaskContextProvider;

請幫幫我。

Answer 1

localStorage.getItem("tasks")

把它放在一個變量和JSON.parse() 。

Answer 2

您可以使用鈎子內的localStorage.getItem("tasks")從 localStorage 檢索數據。

例子

const SomeComponent = props => {
  const [tasks, setTasks] = useState();

  useEffect(() => {
    let taskList = JSON.parse(localStorage.getItem("tasks")); // get the data
    if(taskList)  {
      setTasks(taskList); // update the state if taskList has data
    }
  }, []);



  return (
    /** Print your task here */
  );
};

export default SomeComponent;

Answer 3

1. 您保存在 localStorage 中的項目以 Json 格式存儲。
2. localStorage 具有用於訪問其存儲以進行基本 CRUD 活動的方法，例如：
   • localStorage.setItem(key: JSON.stringify(value))在這種情況下，您使用它來將項目保存到 localStorage
   • JSON.parse(localStorage.getItem(key))獲取鍵存儲的項目，在這種情況下，您需要將其從 JSON 轉換為普通對象，因此需要 JSON.parse()
   • localStorage.clear()清除 localStorage 中的所有項目
   • localStorage.removeItem(key)通過 item 鍵從 localStorage 中刪除一個項目

const theTasks = JSON.parse(window.localStorage.getItem('tasks'));