js实现对sessionStorage中的值进行监听

最近在react项目的开发中遇到了需要对sessionStorage中的值进行监听的需求，在查阅的大量资源后，终于是实现了监听并同步更改在state中的效果，下面我把代码贴给大家！！！

我的需求是在input框获取焦点或失去焦点时控制另一个组件的显示隐藏

return (
      <div>
        {
          show === 2 ? <div className={style.box} ref={c => { this.box = c }}>
            <div className={style.close}></div>
          </div> : null
        }
        <input type="text" onFocus={this.onfocus} onBlur={this.onblur} />
      </div>
    )
  }

失去焦点和获得焦点时分别对sessionStorage进行操作

onfocus = () => {
    window.sessionStorage.setItem('input', 1)
  }

  onblur = () => {
    window.sessionStorage.setItem('input', 2)
  }

接下来就是对sessionStorage进行监听

componentDidMount() {
    const orignalSetItem = sessionStorage.setItem
    sessionStorage.setItem = function (key, newValue) {
      const setItemEvent = new Event("setItemEvent")
      setItemEvent.newValue = newValue
      window.dispatchEvent(setItemEvent)
      orignalSetItem.apply(this, arguments)
    }
    window.addEventListener("setItemEvent", (e) => {
      if ((e.key = "input")) {
        var _this = sessionStorage.getItem("input");
        if (_this !== e.newValue) {
          if (e.newValue) {
            this.setState({
              show: e.newValue
            })
          }
        }
      }
    })
  }

这样就可以实现sessionStorage中input值变化时，state中的show也可以跟着变化