存储下拉选择并从localStorage加载

Question

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

Answer 1

当localStorage.setItem()事件触发时，您可以使用onChange更新选定的选项，并在再次安装组件时使用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
    />
  );
}

实时演示