我在窗口DOM-Object中添加了一个eventListener,并希望跟踪对localStorage所做的更改.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script language="JavaScript"><!--
window.addEventListener('storage', storageEventHandler, false);
function storageEventHandler(evt){
console.log("oldValue: " + evt.oldValue );
console.log("storage event called key: " + evt.key );
console.log("newValue: " + evt.newValue );
}
$(document).ready(function(event) {
$('#link1').click(function(event){
event.preventDefault();
localStorage.setItem('page', 2000);
console.log(localStorage.getItem('page'));
});
$('#link2').click(function(event){
event.preventDefault();
localStorage.setItem('page', 998);
console.log(localStorage.getItem('page'));
});
});
</script>
</head>
</html>
不知何故,即使在单击link1或link2时更改了localStorage值,也永远不会调用storageEventHandler.任何帮助深表感谢.
我正在制作一个身份验证系统，在后端将我重定向到前端页面后，我正在为 userData 发出 API 请求，并将该数据保存到 localStorage。然后我试图加载 Spinner 或 UserInfo。
我正在尝试使用 useEffect 侦听 localStorage 值，但登录后我得到“未定义”。当 localStorage 值更新时 useEffect 不会再次运行并且 Spinner 永远保持旋转。
我试图做：JSON.parse(localStorage.getItem('userData'))，但后来我得到了一个 useEffect 无限循环。
只有当我刷新页面时，我的 localStorage 值才会出现，我可以显示它而不是 Spinner。
我做错了什么？
也许有更好的方法在准备好时加载 userData？
我正在尝试以正确的方式更新 DOM？
感谢您的回答;)
import React, { useState, useEffect } from 'react';
import { Spinner } from '../../atoms';
import { Navbar } from '../../organisms/';
import { getUserData } from '../../../helpers/functions';
const Main = () => {
const [userData, setUserData] = useState();
useEffect(() => {
setUserData(localStorage.getItem('userData'));
}, [localStorage.getItem('userData')]);
return <>{userData …