存储下拉选择并从 localStorage 加载它

Question

我想存储一些下拉列表的几个选择，这些下拉列表的数量是未知的，因为它与某些 API 相关。所以我想要的是每次页面重新加载时它保持每个下拉列表的选择保持不变

Answer 1

您可以在onChange 事件触发时使用localStorage.setItem() 更新选定的选项，并在再次挂载组件时使用localStorage.getItem() 从上次会话中检索数据。

记得在设置和获取数据的时候对数据进行序列化和反序列化。请参阅this answer，了解有关您为什么应该这样做的更多详细信息。

import React from "react";
import Select from "react-select";
import options from "./options";

const SELECT_VALUE_KEY = "MySelectValue";

function MySelect() {
  const [selected, setSelected] = React.useState([]);
  const handleChange = (s) => {
    localStorage.setItem(SELECT_VALUE_KEY, JSON.stringify(s));
    setSelected(s);
  };

  React.useEffect(() => {
    const lastSelected = JSON.parse(
      localStorage.getItem(SELECT_VALUE_KEY) ?? "[]"
    );
    setSelected(lastSelected);
  }, []);

  return (
    <Select
      value={selected}
      onChange={handleChange}
      options={options}
      isMulti
    />
  );
}

现场演示