9.React中使用localStorage本地缓存简单例子

1.新建Moredetails.jsx文件

1.点击提交（填写的数据在本地缓存中保存一份）

import React,{useState} from "react";
import { useNavigate,useLocation } from 'react-router-dom';

import {
  getOverrideProps,
  useStateMutationAction,
} from "@aws-amplify/ui-react/internal";
import {
  Button,
  Flex,
  Icon,
  SelectField,
  SwitchField,
  Text,
  TextAreaField,
  TextField,
  View,
} from "@aws-amplify/ui-react";
import intl from "react-intl-universal";

import { Select, Space} from 'antd';
const options = [
          {
            value: 'HealthIssue',
            label: 'HealthIssue',
          },
          {
            value: 'Disability',
            label: 'Disability',
          },
          {
            value: 'Covid-19',
            label: 'Covid-19',
          },
          
          {
            value: 'Income',
            label: 'Income',
          },
          {
            value: 'Jobless',
            label: 'Jobless',
          },
          {
            value: 'Nursing',
            label: 'Nursing',
          },
          {
            value: 'Child',
            label: 'Child',
          },
        ];
export default function Moredetails(props) {
  const { boundingbox1742500, overrides, ...rest } = props;
  
  const [needHelpValue, setNeedHelpValue] = useStateMutationAction("");
  const [whoNeedValue, setWhoNeedValue] = useStateMutationAction("");
  const [consultedYNValue, setConsultedYNValue] = useStateMutationAction("");
  const [soluctionsValue, setSoluctionsValue] = useStateMutationAction("");
  const [interestsValue, setInterestsValue] = useStateMutationAction("");
  const [concernDetailsValue, setConcernDetailsValue] = useStateMutationAction("");
  const [wayToKnowValue, setWayToKnowValue] = useStateMutationAction("");
  const [urgentFlgValue, setUrgentFlgValue] = useStateMutationAction("");
  
  const navigate = useNavigate();
  const [addressList, setaddressList] = useState([]);
  const fileState = useLocation();
  
  //1.点击提交（填写的数据在本地缓存中保存一份）
  const buttonUpdateOnClick = () => {
    if(addressList){
      addressList[0].needHelp = needHelpValue
      addressList[0].whoNeed = whoNeedValue
      addressList[0].consultedYN = consultedYNValue
      addressList[0].soluctions = soluctionsValue
      addressList[0].interests = interestsValue
      addressList[0].concernDetails = concernDetailsValue
      addressList[0].wayToKnow = wayToKnowValue
      addressList[0].urgentFlg = urgentFlgValue
      localStorage.setItem('CognitoIdentityServiceaddress',JSON.stringify(addressList));
    } else {
      const arr= [{
        needHelp: needHelpValue,
        whoNeed: whoNeedValue,
        consultedYN: consultedYNValue,
        soluctions: soluctionsValue,
        interests: interestsValue,
        concernDetails: concernDetailsValue,
        wayToKnow: wayToKnowValue,
        urgentFlg: urgentFlgValue
      }]
      localStorage.setItem('CognitoIdentityServiceaddress',JSON.stringify(arr));
    }
  //  navigate('/Documents',{state:fileState.state.state})  跳转页面 带数据
  }
  
  React.useEffect(() => {
    //页面初始加载，获取用户默认选中的值
    var addressList = localStorage.getItem('CognitoIdentityServiceaddress') 
    addressList=JSON.parse(addressList)
    
    if(addressList && addressList[0].needHelp){
      setNeedHelpValue(addressList[0].needHelp)
      setWhoNeedValue(addressList[0].whoNeed)
      setConsultedYNValue(addressList[0].consultedYN)
      setSoluctionsValue(addressList[0].soluctions)
      setInterestsValue(addressList[0].interests)
      setConcernDetailsValue(addressList[0].concernDetails)
      setWayToKnowValue(addressList[0].wayToKnow)
      setUrgentFlgValue(addressList[0].urgentFlg)
    }
    setaddressList(addressList)
  },[]);
  
  //下拉列表（多选）
  const [value, setValue] = useState([]);
  const selectProps = {
    mode: 'multiple',
    style: {
      width: '336px',
      fontFamily: "Noto Sans JP",
    },
    value,
    options,
    onChange: (newValue) => {
      setValue(newValue);
    },
    placeholder: intl.get("SELECT_ITEM"),
    maxTagCount: 'responsive',
  };

return(
    <Space
            direction="vertical"
            style={{
              width: '100%',
            }}
            >
            1. What kind of help do you need?"
            <Select 
             size= "large"
             showArrow={true} {...selectProps} />
           </Space>

<SelectField
          label={intl.get("DETAILS_QUESTION_2")}
          textAlign="left"
          placeholder={intl.get("SELECT")}
          width="336px"
          shrink="0"
          size="large"
          isDisabled={false}
          labelHidden={false}
          variation="default"
          value={whoNeedValue}
          onChange={(event) => { setWhoNeedValue(event.target.value);}}
        >
          <option value="needer1">needer1</option>
          <option value="needer2">needer2</option>
          <option value="needer3">needer3</option>
        </SelectField>

<SelectField
          label={intl.get("DETAILS_QUESTION_3")}
          textAlign="left"
          placeholder={intl.get("SELECT")}
          width="336px"
          shrink="0"
          size="large"
          isDisabled={false}
          labelHidden={false}
          variation="default"
          value={consultedYNValue}
          onChange={(event) => {
            setConsultedYNValue(event.target.value);
          }}
        >

<SelectField
          label={intl.get("DETAILS_QUESTION_4")}
          textAlign="left"
          placeholder={intl.get("SELECT")}
          width="336px"
          height="80px"
          shrink="0"
          size="large"
          isDisabled={false}
          labelHidden={false}
          variation="default"
          value={soluctionsValue}
          onChange={(event) => {
            setSoluctionsValue(event.target.value);
          }}
        >
          <option value="solutions1">solutions1</option>
          <option value="solutions2">solutions2</option>
          <option value="solutions3">solutions3</option>
        </SelectField>
   
<TextField
          label={intl.get("DETAILS_QUESTION_5")}
          textAlign="left"
          placeholder={intl.get("WRITE_YOUR_INTERESTS")}
          width="336px"
          shrink="0"
          size="large"
          isDisabled={false}
          labelHidden={false}
          variation="default"
          value={interestsValue}
          onChange={(event) => {
            setInterestsValue(event.target.value);
          }}
        ></TextField>

<TextAreaField
            label={intl.get("DETAILS_QUESTION_6")}
            textAlign="left"
            placeholder={intl.get("WRITE_YOUR_CONCERN_HERE")}
            width="336px"
            shrink="0"
            size="large"
            isDisabled={false}
            labelHidden={false}
            variation="default"
            value={concernDetailsValue}
            onChange={(event) => {
              setConcernDetailsValue(event.target.value);
            }}
          ></TextAreaField>
          .........
)

2.结果展示