在 componentDidMount 访问 sessionStorage

Question

我假设sessionStorage 在组件安装后被实例化，并且可以通过componentDidMount 调用访问它。

我正在使用this script 来通过不同的标签保存我的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 方法访问我的sessionStorage：

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

以上内容在同一标签上按预期工作。

当我打开一个新标签时，在控制台上我从sessionStorage 得到null。
如果我刷新新标签，我会打印出正确的 someData 值。

编辑：

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

Answer 1

它正在按预期工作。

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

使用 localStorage 将数据保存在选项卡中。

我不知道您的用例，但首先要关闭 sessionStorage 和 localStorage。

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