AngularJS UI Grid状态保存与恢复失效问题排查求助

以下是几种常见的原因及修复方案：

1. 状态存储格式错误 #

你直接将saveState.save()返回的对象存入localStorage，但localStorage仅支持存储字符串，直接存对象会被自动转为"[object Object]"，导致恢复时无法解析正确的状态数据。

修复代码：

function saveState() {
    var state = self.storage.gridApi.saveState.save();
    // 序列化对象为字符串后存储
    localStorage.setItem(self.list.id + 'grid', JSON.stringify(state));
}

function restoreState() {
    $timeout(function() {
        var stateStr = localStorage.getItem(self.list.id + 'grid');
        if (stateStr) {
            // 解析字符串为对象后恢复
            var state = JSON.parse(stateStr);
            self.storage.gridApi.saveState.restore($scope, state);
        }
    });
}

2. 网格未完全初始化就执行恢复 #

虽然使用了$timeout，但仍可能出现网格未完成渲染初始化的情况，导致恢复指令无法生效。建议改为监听网格渲染完成事件，确保状态恢复在网格就绪后执行：

修复代码：

// 替换原有的restoreState()直接调用
self.storage.gridApi.core.on.renderingComplete($scope, function() {
    restoreState();
});

3. 未在gridOptions中启用状态保存功能 #

需要在gridOptions中显式开启状态保存配置，否则saveState模块可能无法正常工作：

修复代码：

vm.gridOptions = {
    // 你的其他网格配置...
    saveState: {
        enabled: true
    }
};

4. 事件绑定与状态恢复时机过早 #

确保所有与gridApi相关的事件绑定、状态恢复操作，都放在gridOptions.onRegisterApi回调函数中执行——这是gridApi初始化完成后的正确时机：

修复代码：

vm.gridOptions.onRegisterApi = function(gridApi) {
    self.storage.gridApi = gridApi;
    // 在这里绑定状态保存事件
    gridApi.core.on.columnVisibilityChanged($scope, saveState);
    gridApi.colMovable.on.columnPositionChanged($scope, saveState);
    // 执行状态恢复
    restoreState();
};

5. LocalStorage键值无效 #

检查self.list.id是否有有效值，如果该值为空或未定义，会导致存储的key不正确，恢复时无法获取到对应的状态数据。可以在控制台执行console.log(self.list.id + 'grid')验证键值是否符合预期。

内容的提问来源于stack exchange，提问作者Giannis Poriazis