我如何从会话存储中获得变量的值而不刷新reactjs中的页面?

Question

请我是新的反应，我正试图在会话存储上设置一个值，然后在另一个页面上获取它。问题是，我被迫刷新页面以获得存储在会话存储中的更新值。

我试着这样设置:

sessionStorage.setItem("annee", JSON.stringify(annees));
sessionStorage.setItem("commune", JSON.stringify(communes));

然后用另一种方式:

{JSON.parse(sessionStorage.getItem("commune")).ctd_name_commune}
{JSON.parse(sessionStorage.getItem("annee")).ctd_annee_libelle}

Answer 1

您可以使用事件侦听器。当对存储进行任何更改时，将触发此函数。你不需要刷新页面。

const handleChange = ({ key, value }) => {
// Do Something with the key and value key
};

useEffect(() => {
window.addEventListener(
'storage',
handleChange,
false,
);
return () => window.removeEventListener('storage', handleChange);
}, []);

为了获得更好的结果，您可以简单地创建一个钩子来处理类似于state的存储。我已经为LocalStorage创建了一个。您可以为sessionStorage创建一个类似的。

挂钩联系

编辑

如果它在同一个选项卡上，那么我们必须在同一个页面上单独调度它。它最终可能会对其他页面触发两次相同的操作，但这可以有条件地处理。

调度,

window.dispatchEvent( new Event('storage') ) 

更多MDN阅读

Answer 2

一旦你在sessionStorage中设置了一些东西，你应该能够立即得到它而不刷新，但只有当它在同一个选项卡上。如果您试图从另一个选项卡获取sessionStorage中的数据，则必须始终刷新，除非在设置项之后打开选项卡。你可以这样做:

Promise.resolve( sessionStorage.setItem('test', true) )
.then(() => {
window.open(window.location.href, '_blank')
})

然后，当你在这个新打开的选项卡上，你将能够访问sessionStorage中相同的数据。

同样适用于localStorage和cookies。如果你不能这样做，那么我建议将数据存储在服务器上，并以这种方式检索它。

阅读sessionStorage和localStorage的所有信息:https://blog.logrocket.com/localstorage-javascript-complete-guide/