如何保存与用户输入动态css更改?



我正在建设一个电子商务网站。我正在使用一个心形字体图标,它作为一个工具,用户可以用它来喜欢网站上的一个项目。因此,当用户单击图标时,它会将其颜色从黑色变为红色。如何在css中保存更改?顺便说一句,我用的是reactjs。

const addToWishList = (e) => {
e.target.style.color = 'red';
e.preventDefault();
const parent = e.target.parentElement;
const itemName = parent.childNodes[2].childNodes[0].textContent;
const itemImg = parent.childNodes[1].childNodes[0].src;
const obj = {
item: itemName,
img: itemImg
};
wishlist.push(obj);
};

我使用这段代码来改变图标的颜色,但是我怎么说更新的变化。当浏览器刷新后颜色变回黑色

我不是100%确定如何做到这一点,但我将只是张贴在这里我认为这需要处理。

自<<p> strong>每个用户将有不同的您需要找到一种方法来存储每个用户的收藏夹。

当特定用户访问他们的帐户时,您需要首先获取有关该用户最喜欢的项目的数据,然后如果当前页面,则自动将图标的颜色更改为红色。包含任何喜欢的项目。

将获取的数据存储在会话变量中有助于对其进行更改。

还需要包含代码,以便在用户添加新项目或从其收藏夹中删除项目时进行必要的更改!