title: HTML5 local storage on reload not working
body: <p>To cut this short I have a row of checkboxes and I am trying to have it so that when one is clicked the options saves and remains on browser reload.</p>
  
  <p>I have the array outputting into local storage, however it is not saving, here is the code so far:</p>
  
  <pre><code>&lt;section class="column"&gt;
    &lt;label&gt;&lt;input type="checkbox" name="BBCNews" class="checked" v-model="isBBCNews"&gt;&lt;span&gt;BBC News&lt;/span&gt;&lt;/label&gt;
    &lt;label&gt;&lt;input type="checkbox" name="BBCSport" class="checked" v-model="isBBCSport"&gt;&lt;span&gt;BBC Sport&lt;/span&gt;&lt;/label&gt;
    &lt;label&gt;&lt;input type="checkbox" name="TheTelegraph" class="checked" v-model="isTheTelegraph"&gt;&lt;span&gt;The Telegraph&lt;/span&gt;&lt;/label&gt;
    &lt;label&gt;&lt;input type="checkbox" name="TheIndependent" class="checked" v-model="isTheIndependent"&gt;&lt;span&gt;The Independent&lt;/span&gt;&lt;/label&gt;
  &lt;/section&gt;
  
  &lt;section class="column"&gt;
    &lt;label&gt;&lt;input type="checkbox" name="LadBible" class="checked" v-model="isLadBible"&gt;&lt;span&gt;Lad Bible&lt;/span&gt;&lt;/label&gt;
    &lt;label&gt;&lt;input type="checkbox" name="HackerNews" class="checked" v-model="isHackerNews"&gt;&lt;span&gt;Hacker News&lt;/span&gt;&lt;/label&gt;
    &lt;label&gt;&lt;input type="checkbox" name="Reddit" class="checked" v-model="isReddit"&gt;&lt;span&gt;Reddit&lt;/span&gt;&lt;/label&gt;
    &lt;label&gt;&lt;input type="checkbox" name="ProductHunt" class="checked" v-model="isProductHunt"&gt;&lt;span&gt;Product Hunt&lt;/span&gt;&lt;/label&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>and here is the current javascript code</p>
  
  <pre><code>// Store services to local
    var enabledServices = JSON.parse(localStorage.getItem('enabledServices')) || {},
  
    $checkboxes = $("input[type='checkbox']");
    $checkboxes.on("change", function(){
      $checkboxes.each(function(){
        enabledServices[this.name] = this.checked;
      });
  
      localStorage.setItem("enabledServices", JSON.stringify(enabledServices));
    });
  
    // On page load
    $.each(enabledServices, function(key, value) {
      $("#" + key).prop('checked', value);
    });
  </code></pre>
  
  <p>and here is the array showing in local storage <a href="https://gyazo.com/ab531da1ab9dbd2de55486cc51d85a20" rel="nofollow noreferrer">screenshot</a></p>
  
  <p>I would like the option to disappear altogether but a simple false would do, currently when I refresh all checkboxes go back to there current state.</p>
  
  <p>Any help is appreciated.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>By using the <code>Vue Persist</code> package for Vue <a href="https://www.npmjs.com/package/vue-persist" rel="nofollow noreferrer">https://www.npmjs.com/package/vue-persist</a> I achieved what I needed.</p>