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

Question

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

Answer 1

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

记得在set和get的时候对数据进行序列化和反序列化。请参阅 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
    />
  );
}

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

Store dropdown selection and load it from localStorage

local-storage

reactjs

react-select

dropdown

现场演示