title: Store multiple checkbox values in one localStorage key
body: <p>How can I store multiple checkbox classnames in localStorage (when checked).
  The below script stores only one value, value:test in key:filter</p>
  
  <p>It needs to store values: ["test2","test3"] when having these checkboxes checked. Maybe by using data-filter? I also would like to store the classname of the checkbox.</p>
  
  <p>What I have:</p>
  
  <pre><code>$(function () {
      var data = localStorage.getItem("filter");
      if (data !== null) {
          $("input[name='filter']").attr("checked", "checked");
      }
  });
  
  $("input[name='filter']").click(function () {
      if ($(this).is(":checked")) {
          localStorage.setItem("filter", "test");
      } else {
          localStorage.removeItem("filter");
      } 
  });
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;div class="filterbox"&gt;
    &lt;label&gt;&lt;input name="filter" type="checkbox" class="test1" data-filter="1" /&gt; Test 1 &lt;/label&gt;
    &lt;label&gt;&lt;input name="filter" type="checkbox" class="test2" data-filter="2" /&gt; Test 2 &lt;/label&gt;
    &lt;label&gt;&lt;input name="filter" type="checkbox" class="test3" data-filter="3" /&gt; Test 3 &lt;/label&gt;
    &lt;label&gt;&lt;input name="filter" type="checkbox" class="test4" data-filter="4" /&gt; Test 4 &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>A fiddle;
  <a href="http://jsfiddle.net/Dp4Tj/264/" rel="nofollow noreferrer">http://jsfiddle.net/Dp4Tj/264/</a></p>