Access sessionStorage at componentDidMount

Question

我假设sessionStorage是在组件被挂载之后实例化的，人们可以通过componentDidMount调用访问它。

我使用这个剧本通过不同的选项卡保存我的sessionStorage：

(function() {     
  if (!sessionStorage.length) {
    // Ask other tabs for session storage
    localStorage.setItem('getSessionStorage', Date.now());
  };

  window.addEventListener('storage', function(event) {
    if (event.key == 'getSessionStorage') {
      // Some tab asked for the sessionStorage -> send it
      localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
      localStorage.removeItem('sessionStorage');
    } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
      // sessionStorage is empty -> fill it
      let data = JSON.parse(event.newValue);
      for (key in data) {
        sessionStorage.setItem(key, data[key]);
      }
      showSessionStorage();
    }
});

  window.onbeforeunload = function() {
    //sessionStorage.clear();
  };
})();

它看起来像预期的那样起作用。

我试图通过以下组件的componentDidMount方法访问我的componentDidMount：

export default class Dashboard extends React.Component {
  componentDidMount() {
    console.log(window.sessionStorage.getItem('someData'));
  }

上述功能在相同的选项卡上正常工作。

但是，当我打开一个新的选项卡时，在控制台上我会从null获得sessionStorage。

如果刷新新选项卡，就会得到正确的someData值。

编辑：

为了满足我的需求，我确实改变了我的实现，以使用cookie，但是我仍然对这个问题和任何潜在的解决方案感兴趣。

Answer 1

它正在按预期工作。

会话存储可用于当前会话。当您打开一个新选项卡时，您将创建一个新会话，这就是初始数据为null的原因。

使用localStorage在选项卡中持久化数据。

我不知道您的用例，但从切换sessionStorage和localStorage开始。

把正常的东西保存在sessionStorage上。坚持localStorage