加到Localstorage里，让我进出下一页时不删除记录的信息？

Question

如何将它添加到Localstorage中，以便它在我进入和离开下一页时不删除记录的信息？完整代码

const [firstName, setFirstName] = useState("");
  const [lastname, setLastname] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
<Box sx={{ ml: "140px", mb: "30px" }}>
    {multipleInput.map((item) => {
      return (
        <Grid item sm={8}>
          <TextField
            sx={{ mt: "20px" }}
            autoComplete={item.autoComplete}
            fullWidth
            value={item.value}
            onChange={(e) => item.setValue(e.target.value)}
            label={item.label}
            InputLabelProps={{ style: { fontFamily: "Montserrat" } }}
            inputRef={item.inputRef}
            type={item.type}
          />
        </Grid>
      );
    })}
  </Box></Box>
  <Link href="TechSkill">
    <Button>
      <NavigateNextIcon />
    </Button>
  </Link>

Answer 1

如果我没理解错的话，你想把一个变量的值保存到localStorage，这很容易做到。

可以使用useEffect hook，它会监听变量的更新，不断更新localStorage。

节省看起来像这样：

// SAVING
useEffect(() => {
  // storing input name
  localStorage.setItem("phone", JSON.stringify(phone));
}, [phone]);

因此，当用户更新变量 phone 的值时，localStorage 中的值将自动更新。

要读取 localStorage 中的值，请执行以下操作：

// READING
const [phone, setPhone] = useState(() => {
  // getting stored value
  const saved = localStorage.getItem("phone");
  const initialValue = JSON.parse(saved);
  return initialValue || "";
});

但是对于确切的答案，你并不清楚你到底想做什么，一般来说，如果你调整上面描述的变体应该可以工作。

加到Localstorage里，让我进出下一页时不删除记录的信息？

add it to Localstorage so that it does not delete the recorded information when I go to and from the next page?

javascript

input

uitextfield

local-storage

reactjs