我在窗口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.任何帮助深表感谢.
我想在用户登录时显示一个按钮。如果用户未登录，则我不显示按钮。当用户登录时，我将设置本地存储值。当我在登录组件中设置本地存储时，标题组件必须侦听该事件，并且显示按钮。我正在使用 addEventListener 进行监听。但它没有在监听。
我不知道在 header 组件中在哪里听。
// HeaderComponent(header.js):
class HeaderComponent extends Component {
componentDidMount(){
if(typeof window!='undefined'){
console.log(localStorage.getItem("token"));
window.addEventListener("storage",function(e){
this.setState({ auth: true});
})
}
}
render() {
return (
<div className="header">
<div className="container">
<div className="header-content">
<img src={logo} alt="logo"></img>
<div className="nav-links" >
<ul >
<li>Home</li>
<li>About</li>
<li>Services</li>
<li><NavLink activeClassName="active" to="/upload" >Upload</NavLink></li>
<li><NavLink activeClassName="active" to="/signup"> Sign Up</NavLink></li>
{ this.state.auth? <li onClick={this.onLogout}>Logout</li> :null}
</ul>
</div>
</div>
</div>
</div>
);
}
}
//登录组件（登录.js）
class LoginComponent extends Component {
constructor(props) {
super(props);
this.onSubmit = this.onSubmit.bind(this);
} …