如何从本地存储中获取项目并将其呈现到我的列表中？

Question

我正在尝试创建一个包含两个名为“标题”和“详细信息”的值的待办事项列表。 到目前为止，我可以在本地存储中设置项目，但不确定如何从同一个本地存储中取回项目并将其呈现在列表中。

这是我的 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) 通过项目键从 localStorage 中删除项目

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