Store multiple checkbox values in one localStorage key

How can I store multiple checkbox classnames in localStorage (when checked). The below script stores only one value, value:test in key:filter

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.

What I have:

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

And the HTML:

<div class="filterbox">
  <label><input name="filter" type="checkbox" class="test1" data-filter="1" /> Test 1 </label>
  <label><input name="filter" type="checkbox" class="test2" data-filter="2" /> Test 2 </label>
  <label><input name="filter" type="checkbox" class="test3" data-filter="3" /> Test 3 </label>
  <label><input name="filter" type="checkbox" class="test4" data-filter="4" /> Test 4 </label>
</div>

A fiddle; http://jsfiddle.net/Dp4Tj/264/