Question

我正在尝试构建一个React应用，我可以在其中看到类似于stackoverflow的通知。
当我打开两个不同的选项卡并打开stackoverflow时。我在两个不同的标签中看到了通知。
但是当我单击该通知图标时，数字就会消失。
类似地，在另一个标签中，数字也会消失，而不会刷新页面。
我通过在ie和chrome中打开来分析了stackoverflow网站
当我在chrome浏览器中单击信誉时，我看到了网络通话，而在IE浏览器中却没有刷新数字。
我在本地存储和会话存储中看到了一些值。
是否有可能在进行api调用时实现withot，我们暂时可以使用模拟数据来实现
我构建选项卡ui并重定向到选项卡页面
所以我在google上找到了此链接browser sessionStorage. share between tabs?
在我的反应代码中使用了它，由于某种原因本地存储未设置
它正在使用此方法anotherPage
但存储键值未添加。
通过放置控制台进行了调试，但未在窗口事件内打印任何内容。
您能告诉我如何解决它，表明我可以在不同链接和标签之间共享会话。
在下面提供我的屏幕截图代码段和沙箱

退休通知方案 消息通知场景

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>
    );
  }

Answer 1

我在确定您的代码笔和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>
    );
  }

反应应用程序本地存储未设置

1 个答案: