如何在不删除reactj的前一个cookie的情况下设置和存储和更新cookie

Question

如何编写一个cookie，该cookie在用户提交表单时保存输入值.....以及表单再次提交时，请在不删除先前保存的值的情况下更新cookie

export default function setcookie() {
  const [ name, setName ] = useState('');
  const [ email, setEmail ] = useState('');
  const [ mobile, setMobile ] = useState('');


  const cookie = () => {
    localStorage.setItem("Names", name);
    localStorage.setItem("Emails", email);
    localStorage.setItem("Mobiles", mobile);
  }
  const Data = () => {

    const names = localStorage.getItem("Names");
    const emails = localStorage.getItem("Emails");
    const mobiles = localStorage.getItem("Mobiles");

    return names + emails + mobiles;
  }
    return (
        <div>
        <div className='page-wrapper d-inline-block'>
        <TextField id="standard_name" onChange={(e) => setName(e.target.value)} value={name} type="text" name="name" dir='rtl' label="FullName" variant="standard" />
        <TextField id="standard_email"onChange={(e) => setEmail(e.target.value)} value={email} type="text" name="email" dir='rtl' label="Email" variant="standard" />
        <TextField id="standard_number"onChange={(e) => setMobile(e.target.value)} value={mobile} type="number" name="mobile" dir='rtl' label="Phone Number" variant="standard" />
        <TextField id="standard-message" type="text" name="message" dir='rtl' label="Message" variant="standard" />
        <All.Button variant='outlined' name="btn" onClick={cookie}>sa</All.Button>
          </div>
          <Data />
      </div>
    );
  }

Answer 1

我假设name，<代码>电子邮件和Mobiles都存储为数组？

localstorage仅支持字符串。但是您可以使用json.stringify（）将数组转换为JSON字符串

const handleFormSubmit = () => {
  // validate form data or whatever...
  saveInputsToLocalStorage()
}

const saveInputsToLocalStorage = () => {
  const prevSavedInputs = loadInputsFromLocalStorage()
  
  for (const input in prevSavedInputs) {
    let inputArray = prevSavedInputs[input] || []
    
    let value
    switch (input) {
      case 'Names':
        value = name
        break
      case 'Emails':
        value = email
        break
      case 'Mobiles':
        value = mobile
        break
    }
    
    localStorage.setItem(input, JSON.stringify([...inputArray, value]))
  }
}

const loadInputsFromLocalStorage = () => {
  const names = localStorage.getItem('Names')
  const emails = localStorage.getItem('Emails')
  const mobiles = localStorage.getItem('Mobiles')
  
  return {
    Names: names ? JSON.parse(names) : null,
    Emails: emails ? JSON.parse(emails) : null,
    Mobiles: mobiles ? JSON.parse(mobiles) : null
  }
}

Answer 2

您可以使用数组存储日期并显示LocalStorage或Cookie的数据

export default function setcookie() {
  const [ name, setName ] = useState('');
  const [ email, setEmail ] = useState('');
  const [ mobile, setMobile ] = useState('');


  const cookie = () => {
    let data = {
     Names: name,
     Emails:email,
     Mobiles:mobile
   }
    let Datas = localStorage.getItem("Datas") ? localStorage.getItem("Datas") : []
    Datas.push(data)
    localStorage.setItem("Datas", Datas);
  }
  const Data = () => {

    const Datas= localStorage.getItem("Datas");
    if (Datas){
     let data =  Datas[Datas.length - 1]
     return data.name +   data.emails + data.mobiles;
   }

    return '';
  }
    return (
        <div>
        <div className='page-wrapper d-inline-block'>
        <TextField id="standard_name" onChange={(e) => setName(e.target.value)} value={name} type="text" name="name" dir='rtl' label="FullName" variant="standard" />
        <TextField id="standard_email"onChange={(e) => setEmail(e.target.value)} value={email} type="text" name="email" dir='rtl' label="Email" variant="standard" />
        <TextField id="standard_number"onChange={(e) => setMobile(e.target.value)} value={mobile} type="number" name="mobile" dir='rtl' label="Phone Number" variant="standard" />
        <TextField id="standard-message" type="text" name="message" dir='rtl' label="Message" variant="standard" />
        <All.Button variant='outlined' name="btn" onClick={cookie}>sa</All.Button>
          </div>
          <Data />
      </div>
    );
  }