Save state of jqGrid in localStorage after leaving the site

Question

I want to save the state of a jqGrid (sortingcolumn, sortingorder, width of columns, toolbar searchfields), when the user leave the site and restore the grid when he comes back to the site.

My first try was to load the data with the getGridParam method then serialize it with JSON and save it as JSON-String in a cookie. But a cookie have not enough space to save the gridParam. So I decided to use localstorage to save the state of the Grid. My code looks like this:

$(window).unload(function () {
    // Load GridParam
    var gridData = $('#Grid').jqGrid('getGridParam')};
    // Serialize it to as JSON-String
    var gridDataAsString = $.toJSON(gridData);
    // Save the serialized Griddata in the localStorage
    localStorage.setItem("GridParam", gridDataAsString);
});

This works fine. But in the next step I load the GridParam from the localStroage and try to restore the grid.Loading the data is also no problem. In debugging mode I can see that all data are correctly loaded from the localStorage. But if I want to restore the Grid with the setGridParam method the grid have all default values. My code looks like the following:

$(document).ready(function () {
    $("#Grid").jqGrid({ /* Initialize the grid with default values */ });

    var loadedGridDataAsString = localStorage.getItem("GridParam");
    // Use the default value if no data exists in localStorage
    if (loadedGridDataAsString != null) {
        // Deserialize the JSON-String to an object
        var loadedGridData = $.evalJSON(loadedGridDataAsString);
        $("#Grid").jqGrid('setGridParam', loadedGridData);
        $("#Grid").trigger('reloadGrid');
    }
}

Answer 1

This is how I saved the state of my Grid (as json data in a hidden field though instead of localstorage, but the idea should be the same).

Saving the Grid Parameters as JSON in the hidden field:

 function saveGridParameters(grid) {       
            var gridInfo = new Object();

            gridInfo.url = grid.jqGrid('getGridParam', 'url');
            gridInfo.sortname = grid.jqGrid('getGridParam', 'sortname');
            gridInfo.sortorder = grid.jqGrid('getGridParam', 'sortorder');
            gridInfo.selrow = grid.jqGrid('getGridParam', 'selrow');
            gridInfo.page = grid.jqGrid('getGridParam', 'page');
            gridInfo.rowNum = grid.jqGrid('getGridParam', 'rowNum');
            gridInfo.postData = grid.jqGrid('getGridParam', 'postData');
            gridInfo.search = grid.jqGrid('getGridParam', 'search');

            $('#gridParams').val(JSON.stringify(gridInfo));
        }

Loading the saved data: (I load the saved data in the beforeRequest event of the grid):

                beforeRequest: function() //loads the jqgrids state from before save
                {
                    if(gridParams !=null && gridParams!="")
                    {                            
                        var gridInfo = $.parseJSON(gridParams);                                    
                        var grid = $('#ReportPartsGrid');                           

                        grid.jqGrid('setGridParam', { url: gridInfo.url });
                        grid.jqGrid('setGridParam', { sortname: gridInfo.sortname });
                        grid.jqGrid('setGridParam', { sortorder: gridInfo.sortorder });
                        grid.jqGrid('setGridParam', { selrow: gridInfo.selrow });
                        grid.jqGrid('setGridParam', { page: gridInfo.page });
                        grid.jqGrid('setGridParam', { rowNum: gridInfo.rowNum });
                        grid.jqGrid('setGridParam', { postData: gridInfo.postData });
                        grid.jqGrid('setGridParam', { search: gridInfo.search });

                        gridParams = '';
                        $('#ReportPartsGrid').trigger('reloadGrid');                           
                    }                                               
                },