如何利用Local Storage保存jQuery模态弹窗状态，页面刷新切换不丢失

针对弹窗状态丢失的问题，我们可以通过Local Storage存储弹窗的关键状态（是否打开、是否最小化、位置、尺寸、URL、标题），在页面加载时自动恢复，状态变化时实时更新存储。以下是修改后的完整代码及说明：

修改后的完整脚本 #

<script type="text/javascript">
// 封装Local Storage操作，按弹窗名称区分存储
function getDialogState(name) {
    const state = localStorage.getItem(`dialog_${name}`);
    return state ? JSON.parse(state) : null;
}

function saveDialogState(name, state) {
    localStorage.setItem(`dialog_${name}`, JSON.stringify(state));
}

function removeDialogState(name) {
    localStorage.removeItem(`dialog_${name}`);
}

// 页面加载完成后，自动恢复已存储的弹窗状态
$(document).ready(function() {
    Object.keys(localStorage).forEach(key => {
        if (key.startsWith('dialog_')) {
            const name = key.replace('dialog_', '');
            const state = getDialogState(name);
            if (state && state.isOpen) {
                // 调用函数重建弹窗
                modalWindow(name, state.title, state.url, state.width, state.height);
                const $dialog = top.$(`#dialog-${name}`);
                // 恢复位置和最小化状态
                $dialog.dialog('option', 'position', state.position);
                state.isMinimized && $dialog.dialogExtend('minimize');
            }
        }
    });
});

function modalWindow(name, title, url, width, height) {
    // 设置默认尺寸
    width = typeof width === 'undefined' ? 800 : width;
    height = typeof height === 'undefined' ? 600 : height;

    const dialogId = `#dialog-${name}`;
    const $dialog = top.$(dialogId);

    // 检查弹窗是否存在，不存在则创建
    if ($dialog.length === 0) {
        top.$('body').append(`<div id="dialog-${name}" title="${title}" style="padding:0;">
            <iframe src="${url}" frameborder="no" style="position:absolute;width:100%;height:100%;" scrolling="yes"></iframe>
        </div>`);
    } else {
        // 更新已有弹窗的标题和URL
        $dialog.attr('title', title);
        $dialog.find('iframe').attr('src', url);
    }

    // 初始化弹窗并绑定状态监听事件
    top.$(dialogId).dialog({
        width: width,
        height: height,
        position: { my: "center", at: "center+20px", of: window }, // 修复原target未定义问题
        open: function() {
            const state = getDialogState(name) || {};
            saveDialogState(name, {
                ...state,
                isOpen: true,
                title: title,
                url: url,
                width: width,
                height: height,
                position: $(this).dialog('option', 'position')
            });
        },
        close: function() {
            removeDialogState(name); // 关闭弹窗时清除存储状态
        },
        dragStop: function() {
            const state = getDialogState(name);
            if (state) {
                state.position = $(this).dialog('option', 'position');
                saveDialogState(name, state);
            }
        },
        resizeStop: function() {
            const state = getDialogState(name);
            if (state) {
                state.width = $(this).dialog('option', 'width');
                state.height = $(this).dialog('option', 'height');
                saveDialogState(name, state);
            }
        }
    }).dialogExtend({
        minimizable: true,
        minimize: function() {
            const state = getDialogState(name);
            if (state) {
                state.isMinimized = true;
                saveDialogState(name, state);
            }
        },
        restore: function() {
            const state = getDialogState(name);
            if (state) {
                state.isMinimized = false;
                saveDialogState(name, state);
            }
        }
    });
}
</script>

核心修改点 #

• Local Storage封装：用三个函数统一处理存储读写，按弹窗名称区分存储，支持多弹窗独立保存状态。
• 页面加载自动恢复：在页面就绪时遍历Local Storage，自动重建并恢复已存储的弹窗状态。
• 实时状态同步：绑定弹窗的打开、关闭、拖动、缩放事件，以及dialogExtend的最小化/还原事件，每次状态变化时更新存储。
• 修复原代码问题：合并重复的dialog调用，修复target未定义的错误。

注意事项 #

• 状态存储在用户本地浏览器中，清除浏览器缓存会丢失状态；若需跨设备同步需后端支持，当前方案已满足页面刷新/切换的需求。
• 多个不同名称的弹窗会独立保存状态，互不干扰。

内容的提问来源于stack exchange，提问作者Valentina Furnò