JSFiddle - React, Tailwind, and code Playground

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>

JavaScript

// I would like to store multiple checkbox classnames in localstorage when checked.
// The below script stores value:test in key:filter

// I would like to store values: ["test2","test3"] when having these checkboxes checked.
// Maybe by using data-filter and store the classname?


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