- 我正在尝试构建一个 React 应用程序,我可以在其中看到类似于 stackoverflow 的通知。
- 当我打开两个不同的选项卡并打开 stackoverflow 时。我在两个不同的标签中看到通知。
- 但是当我点击那个通知图标时,数字消失了。
- 类似地,在另一个选项卡中,数字也会在不刷新页面的情况下消失。
- 我通过在 ie 和 chrome 中打开分析了 stackoverflow 网站
- 当我在 chrome 浏览器中单击信誉时,我看到正在发生网络调用,而在 IE 浏览器中没有刷新数字就消失了。
- 我在本地存储和 session 存储中看到了一些值(value)。
- 是否可以在不调用 api 的情况下实现,暂时我们可以使用模拟数据实现吗
- 我构建标签 ui 并重定向到标签页
- 所以我用谷歌搜索并找到了这个链接 browser sessionStorage. share between tabs?
- 在我的 React 代码中使用它,由于某些原因本地存储没有设置
- 它进入另一个页面的这个方法
- 但存储键值没有增加。
- 通过放置控制台进行调试,但它不会在窗口事件中打印任何内容。
- 你能告诉我如何修复它显示我可以在不同的链接和选项卡之间共享 session 吗。
- 在下面提供我的截屏代码片段和沙箱
https://codesandbox.io/s/material-demo-j5ec5
demo.js
anotherPage = () => {
console.log("redictToStepper --->");
this.props.history.push("/anotherPage");
if (!event) {
console.log("window --->");
event = window.event;
} // ie suq
if (!event.newValue) return; // do nothing if no value to work with
if (event.key == "getSessionStorage") {
console.log("window --->");
// another tab asked for the sessionStorage -> send it
localStorage.setItem("sessionStorage", JSON.stringify(sessionStorage));
// the other tab should now have it, so we're done with it.
localStorage.removeItem("sessionStorage"); // <- could do short timeout as well.
} else if (event.key == "sessionStorage" && !sessionStorage.length) {
// another tab sent data <- get it
var data = JSON.parse(event.newValue);
for (var key in data) {
sessionStorage.setItem(key, data[key]);
}
}
//listen for changes to localStorage
if (window.addEventListener) {
console.log("window --->");
window.addEventListener("storage", "xxx", false);
} else {
console.log("window --->");
window.attachEvent("onstorage", "xxx");
}
// Ask other tabs for session storage (this is ONLY to trigger event)
if (!sessionStorage.length) {
localStorage.setItem("getSessionStorage", "foobar");
localStorage.removeItem("getSessionStorage", "foobar");
}
};
pageOne.js
render() {
const {
showSearchResults,
searchText,
typeAhead,
typeAheadMode,
canEdit,
value
} = this.state;
const { classes } = this.props;
return (
<div className={classes.root}>
<AppBar position="static" color="default">
<Tabs
value={value}
onChange={this.handleChange}
indicatorColor="primary"
textColor="primary"
variant="scrollable"
scrollButtons="auto"
>
<Tab label="Radiobutton One" />
<Tab label="checkbox Two" />
</Tabs>
</AppBar>
{value === 0 && <TabContainer>Notification One</TabContainer>}
{value === 1 && <TabContainer>Notification Two</TabContainer>}
</div>
);
}
最佳答案
我无法弄清楚您的 codepen 和 anotherPage 函数试图实现什么,所以我向您提供 this codepen .在两个不同的窗口中打开它并查看通知的共享数量。
请注意,建议的本地存储解决方案仅适用于同一浏览器,因为浏览器不共享其本地存储。
如何在不进行任何远程 API 调用的情况下在两个窗口之间同步本地存储:
首先让添加一个事件监听器。第一个参数是事件类型(这里我们正在监听存储),第二个是回调。请注意,监听 storage 事件仅在两个窗口之间有效(从一个窗口更新存储不会触发它自己的监听器):
componentDidMount() {
window.addEventListener("storage", this.handleStorageUpdate);
}
当您不再使用它时(可能在 componentWillUnmount 上)请记住删除此监听器以防止任何膨胀。
componentWillUnmount() {
window.removeEventListener("storage", this.handleStorageUpdate);
}
现在让我们来看看我们的监听器。它将接收所有存储更改,但我们只想收听通知更改。当存储中的通知发生变化时,我们希望更新组件状态以触发具有新值的重新渲染:
handleStorageUpdate = storageChange => {
if (storageChange.key === "notifications") {
this.setState(() => ({ notifications: Number(storageChange.newValue) }));
}
};
所以现在,我们可以让两个窗口监听彼此所做的更改。
让我们给出一种增加通知量的方法:
handleIncreaseNotification = () => {
const notifications = this.state.notifications + 1;
localStorage.setItem("notifications", notifications);
this.setState(() => ({ notifications }));
};
当增加通知数量时,您正在将本地存储项目设置为由其他窗口使用。由于您没有监听您自己的本地存储更改,因此您需要将您的状态设置为这个新的通知数量。
因为您想在打开窗口时直接看到通知计数,请记住在组件生命周期的最早状态之一获取本地存储的值:
constructor(props) {
super(props);
const notifications = localStorage.getItem("notifications") || 0;
this.state = { notifications: Number(notifications) };
}
最后你可以渲染整个组件:
render() {
const { notifications } = this.state;
return (
<div>
<div> I have {notifications} notifications</div>
<button onClick={this.handleIncreaseNotification}>increase</button>
</div>
);
}
关于javascript - React 应用程序本地存储未设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56385656/