title: JavaScript - Issues recovering a map in an object after being saved in localStorage
body: <p>I've been dealing with this for some time. I've a list of sections in which the user checks some checkboxes and that is sent to the server via AJAX. However, since the user can return to previous sections, I'm using some objects of mine to store some things the user has done (if he/she already finished working in that section, which checkboxes checked, etc). I'm doing this to not overload the database and only send new requests to store information if the user effectively changes a previous checkbox, not if he just starts clicking &quot;Save&quot; randomly. I'm using objects to see the sections of the page, and storing the previous state of the checkboxes in a Map. Here's my &quot;supervisor&quot;:</p>
  <pre><code>function Supervisor(id) {
      this.id = id;
      this.verif = null; 
      this.selections = new Map();
      var children = $(&quot;#ContentPlaceHolder1_checkboxes_div_&quot; + id).children().length;
      for (var i = 0; i &lt; children; i++) {
          if (i % 2 == 0) {
              var checkbox = $(&quot;#ContentPlaceHolder1_checkboxes_div_&quot; + id).children()[i];
              var idCheck = checkbox.id.split(&quot;_&quot;)[2];
              this.selections.set(idCheck, false);
          }
      }
      console.log(&quot;Length &quot; + this.selections.size);
      this.change = false;
  }
  </code></pre>
  <p>The console.log gives me the expected output, so I assume my Map is created and initialized correctly. Since the session of the user can expire before he finishes his work, or he can close his browser by accident, I'm storing this object using local storage, so I can change the page accordingly to what he has done should anything happen. Here are my functions:</p>
  <pre><code>function setObj(id, supervisor) {
      localStorage.setItem(id, JSON.stringify(supervisor));
  }
  
  function getObj(key) {
      var supervisor = JSON.parse(localStorage.getItem(key));
      return supervisor;
  } 
  </code></pre>
  <p>So, I'm trying to add to the record whenever an user clicks in a checkbox. And this is where the problem happens. Here's the function:</p>
  <pre><code>function checkboxClicked(idCbx) {
      var idSection = $(&quot;#ContentPlaceHolder1_hdnActualField&quot;).val();
      var supervisor = getObj(idSection);
      console.log(typeof (supervisor)); //Returns object, everythings fine
      console.log(typeof (supervisor.change)); //Returns boolean
      supervisor.change = true;
      var idCheck = idCbx.split(&quot;_&quot;)[2]; //I just want a part of the name
      console.log(typeof(supervisor.selections)); //Prints object
      console.log(&quot;Length &quot; + supervisor.selections.size); //Undefined!
      supervisor.selections.set(idCheck, true); //Error! Note: The true is just for testing purposes
      setObj(idSection, supervisor);
  }
  </code></pre>
  <p>What am I doing wrong? Thanks!</p>