下一个js中的LocalStorage

Question

我正在尝试在下一个js应用程序中将一些项目set到localStorage中，但是它不起作用，而且在localStorage中什么也没有保存。

这是我的密码：

function AsyncForm(props) {

const [job, setJob] = useState(
    typeof window !== "undefined"
      ? localStorage.getItem("job")
      : typeof window !== "undefined"
      ? JSON.parse(localStorage.getItem("job"))
      : null
  );

  const [caption, setCaption] = useState(
    typeof window !== "undefined"
      ? localStorage.getItem("caption")
      : typeof window !== "undefined"
      ? JSON.parse(localStorage.getItem("caption"))
      : null
  );

  const [transcription, setTranscription] = useState(
    typeof window !== "undefined"
      ? localStorage.getItem("transcription")
      : typeof window !== "undefined"
      ? JSON.parse(localStorage.getItem("transcription"))
      : null
  );

  useEffect(() => {
    if (!job) return;

    const url = `api/caption/${job.id}`;
    fetch(url)
      .then((res) => res.text())
      .then((caption) => {
        window.localStorage.setItem("caption", JSON.stringify(caption));
        setCaption(caption);
      })
      .catch((err) => console.log(err));
  }, [job]);

  useEffect(() => {
    if (!job) return;

    const transUrl = `/api/transcription/${job.id}/text`;
    fetch(transUrl)
      .then((res) => res.text())
      .then((transcription) => {
        window.localStorage.setItem(
          "transcription",
          JSON.stringify(transcription)
        );
        setTranscription(transcription);
      })
      .catch((err) => console.log(err));
  }, [job]);

return (
    <>
      {job && transcription ? (
        <p style={{ color: "white", paddingTop: "200px" }}>{transcription}</p>
      ) : (
        <p style={{ color: "white", paddingTop: "200px" }}>loading...</p>
      )}

      {job && caption ? (
        <div style={{ color: "white" }}>
          <MediaPlayer src={job.media_url} caption={caption} />
        </div>
      ) : (
        <img alt="hero" src="https://dummyimage.com/300x300" />
      )}
      <div style={{ color: "white" }}>
        <MediaUploader />
      </div>
    </>
  );
}

}

有人知道我在这里做错了什么吗？

Answer 1

我认为不需要使用.then((res) => res.text())，因为您想要转换为json，您可以将它放在头content-type : application/json中，然后在函数put console.log()中显示结果，如果没有数据，检查失眠中的api或postman检查是否得到任何结果。

Answer 2

接下来，Js使用不与浏览器通信的节点服务器。

我建议使用库新手来保存cookies中的数据并获取数据。

https://npm.io/package/nookies