サイトを離れるとlocalStorageにjqGridの状態を保存します

Question

jqGrid（sortingcolumn、sortingorder、列の幅、ツールバーの検索フィールド）の状態を保存したいとき、ユーザーがサイトを離れて戻るときにグリッドを復元するサイト。

私の最初の試みは、getGridParamメソッドでデータをロードし、それをJSONでシリアル化し、JSON-Stringとしてクッキーに保存することでした。しかし、クッキーは、gridParamを保存するのに十分なスペースがありません。 そこで、私はlocalstorageを使ってGridの状態を保存することに決めました。私のコードは次のようになります：

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

これは問題なく動作します。しかし次のステップでは、localStroageからGridParamをロードし、グリッドを復元しようとします。データのロードも問題ありません。デバッグモードでは、すべてのデータがlocalStorageから正しく読み込まれていることがわかります。しかし、setGridParamメソッドでグリッドを復元したい場合、グリッドはすべてデフォルト値を持ちます。私のコードは次のようになります。

$(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

これは、（代わりのlocalStorageのかの隠しフィールドでのJSONデータとして、しかし、アイデアは同じでなければなりません）私は私のグリッドの状態を保存する方法です。保存されたデータをロード

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

：hiddenフィールドにJSONとしてグリッドのパラメータを保存する

（私は、グリッドのbeforeRequestイベントに保存されたデータをロードする）：

   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');       
        }            
       },