如何将来自react hook表单的数据存储在cookie中

Question

在这种情况下，我需要将这些数据存储在cookie中，但我不知道如何做到这一点。

它已经存储在localStorage中，但我也需要存储在cookie中。

有图书馆可以做吗？我该如何使用它？

有人能帮我吗？

const Form = () => {
const {
register,
handleSubmit,
formState: { errors },
setValue,
} = useForm({
resolver: yupResolver(validationPost),
});
//API Handler
const checkCEP = (e) => {
if(!e.target.value)return;
const cep = e.target.value.replace(/D/g, "");
fetch(` https://viacep.com.br/ws/${cep}/json/`).then(res => res.json()).then(data => {console.log(data);
setValue('address', data.logradouro);
setValue('city', data.localidade);
setValue('state', data.uf);

})
};
// LocalStorage
const localStorageData = (data) => {
localStorage.setItem("form", JSON.stringify(data))
alert('You have been registered!')

};
return (
<FormWrapper>
<h1>Register</h1>
<form onSubmit={handleSubmit(localStorageData)}>
<div className="fields">
<label>Name</label>
<div>
<input type="text" name="name" {...register("name")} />
<p className="error-message">{errors.name?.message}</p>
</div>
</div>
<div className="fields">
<label>Date of birth</label>
<div>
<input type="date" name="birthdate" {...register("birthdate")} />
<p className="error-message">{errors.birthdate?.message}</p>
</div>
</div>
<input type="submit" value="Register" className="button-submit" />
</form>
</FormWrapper>
);
};
export default Form;

Answer 1

您可以使用cookies API中的set()方法。

您需要满足一些要求才能使用它，但这些要求已在上述文档链接的第二段中列出。

只有在包含"；cookie"；manifest.json文件中的API权限，以及清单中指定的给定URL的主机权限。给定的URL还需要必要的权限来创建具有给定参数的cookie。

在您的情况下，一旦您考虑到了以上内容，就可以像一样简单

await browser.cookies.set({
title: "Data Cookie 🍪",
url: "https://yoursite.com",
value: data
});

至于为所有可选属性添加哪些值，我喜欢这个"；饼干配方"；谷歌的Rowan Merewood 视频