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

似乎按预期工作。

我正尝试通过以下（已剥离）组件的sessionStorage方法访问我的componentDidMount：

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

上述内容适用于同一标签。

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

修改

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

Answer 1

它按预期工作。

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

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

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

将正常内容保存在sessionStorage上。坚持localStorage

在componentDidMount

1 个答案: