Save jqGrid state in localStorage after exiting site

Question

I want to keep the state of jqGrid (sortingcolumn, sortingorder, width of columns, searchbars toolbar) when the user leaves the site and restores the grid when he returns to the site.

My first attempt was to load data using the getGridParam method, and then serialize it using JSON and save it as a JSON-String in a cookie. But cookies do not have enough space to save gridParam. So I decided to use localstorage to save the state of the grid. My code is as follows:

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

It works great. But in the next step, I load the GridParam from localStroage and try to restore the grid.Loading data is also not a problem. In debug mode, I see that all data is loaded correctly from localStorage. But if I want to restore the Grid using the setGridParam method, then the grid has all the default values. My code is as follows:

 $(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, but instead of localstorage, but the idea should be the same).

Saving the grid parameters as JSON in a 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 Saved Data: (I load saved data into 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'); } },