title: Set and use localStorage to retain checkbox selections during form edit
body: <p>I have a form that uses <code>jqGrid</code> for a section of the form. This section displays user info that can be selected via the checkbox. On the review page there is an option to edit the form and I'm trying to retain the checkbox selections during this process. </p>
  
  <p>I'm trying to use <code>window.localStorage</code> for this however I'm not sure how to setItem properly. I'm calling getItem in the loadComplete and my coding may not be quite correct here either. What I have now, when a user goes to edit, selects the first item in the jqGrid instead of the actual saved item. I'm guessing because I haven't properly setItem. Can anyone offer guidance?</p>
  
  <pre><code>$.jgrid.gridUnload("#list");
  
  myGrid = $("#list").jqGrid({
      url: baseURL + '/scripts/get_user_list.php' + urlString,
      datatype: "json",
      mtype: 'POST',
      width: 660,
      height: '100%',
      pager: '#pager',
      rowNum: 10,
      rowList: [20, 30, 40, 50, 60],
      sortname: 'id',
      sortorder: "asc",
      viewrecords: true,
      multiselect: true,
      repeatitems: false,
      imgpath: '/scripts/jquery-ui/images',
  
      colNames: ['id', 'Building', 'Company ID', 'Description', 'Individual Name', 'SECCode'],
      colModel: [
          {name: 'id', index: 'id', jsonmap: 'id', hidden: true, width: 20},
          {name: 'Building', index: 'Building', jsonmap: 'Building', hidden: true, width: 20},
          {name: 'CompanyId', index: 'CompanyId', jsonmap: 'CompanyId', width: 110},
          {name: 'Description', index: 'Description', jsonmap: 'Description', sortable: true, width: 300},
          {name: 'IndName', index: 'IndName', jsonmap: 'IndName', width: 200},
          {name: 'UsrNum', hidden: true, index: 'UsrNum', jsonmap: 'UsrNum'}
      ],
      jsonReader: {
          repeatitems: false,
          root: 'rows',
          id: '0',
          cell: '',
          subgrid: {
              root: 'rows',
              id: '0',
              cell: '',
              repeatitems: false
          }
      },
  
      // subgrid support
      subGrid: true,
      subGridUrl: baseURL + '/scripts/get_user_list.php' + urlString,
      subGridModel: [{
          name: ['Date', 'ID'],
          params: ['CompanyId'],
          align: ['center', 'right'],
          width: [150, 80]
      }
      ],
  
      ondblClickRow: function (id) {
          $('#recId').val(id);
      },
  
  
      beforeRequest: function () {
          blnGridLoading = true;
          // console.log("beforeRequest(); setting blnGridLoading=true");
          fnValidateAccount(); // Check that user has data available
      },
      loadComplete: function () {
  
          $(':checkbox').each(function () {
              var status = localStorage.getItem(this.id) === "false" ? false : true;
              $(this).prop("checked", status);
          });
  
          blnGridLoading = false;
          // console.log("loadcomplete(); setting
          blnGridLoading = false;
          // ");
  
          for (swap in arySwap) {
              if (typeof arySwap[swap]['CompanyId'] != 'undefined') {
  
                  $("#list").jqGrid('setSelection', arySwap[swap]['CompanyId']); // select companyId
              }
          }
          fnValidateAccount(); // Check that user has data available
  
      },
  });
  </code></pre>
  
  <p>Here's the localStorage.getItem in loadComplate, isolated from the rest of the code:</p>
  
  <pre><code>$(':checkbox').each(function () {
      var status = localStorage.getItem(this.id) === "false" ? false : true;
      $(this).prop("checked", status);
  });
  </code></pre>
  
  <p>Here's what I tried for setItem and where I'm not sure where to place this or if this is the correct way to go.</p>
  
  <pre><code>$(':checkbox').on('change', function () {
      //set the check value of checkbox
      localStorage.setItem(this.id, this.checked);
  });
  </code></pre>