未在移动浏览器上检索会话存储

Question

我有一个 create-react-app，我在 sessionStorage 中存储了一些状态，以便在用户会话期间保留一些 redux 状态。

在桌面浏览器中一切正常，但在 Safari 或 Chrome 内的移动设备上调试时，状态不会在刷新时检索到。这会导致错误，因为状态不再存在。

知道为什么这只会发生在移动浏览器上吗？

这就是我使用 sessionStorage 保存和检索状态的方式：

export function saveToLocalStorage(state: AppState) {
    const hasUserProfileId =
        state.system.profile.id && state.system.profile.id !== '';
    try {
        if (hasUserProfileId) {
            const serializedState = JSON.stringify(state);
            sessionStorage.setItem('state', serializedState);
        }
    } catch (error) {
        console.log('Error saving state to local storage');
    }
}

function loadFromLocalStorage() {
    console.log('loadFromLocalStorage - 1');

    try {
        const serializedState = sessionStorage.getItem('state');

        if (serializedState === null) {
            return undefined;
        }
        return JSON.parse(serializedState);
    } catch (error) {
        console.log('Error loading state from local storage');
        return undefined;
    }
}

它在执行 const serializedState = sessionStorage.getItem('state'); 时为空，所以它 returns undefined

if (serializedState === null) {
     return undefined;
 }

Answer 1

我正在使用 beforeunload 事件侦听器来保存刷新时的状态。移动浏览器不支持此事件处理程序。将其替换为 unload 有效。

window.addEventListener('unload', () => {
     saveToLocalStorage(store.getState());
});

未在移动浏览器上检索会话存储

Session Storage not being retrieved on mobile browser

javascript

session-storage

reactjs

redux