刷新页面时保存用户的选择

我目前有一个显示不同团队数据的页面.

我有一些数据,用户可以点击这些数据使其处于"开启"或"关闭"状态,每个数据都显示不同的图标.它基本上就像一个清单,只是没有物理复选框.

我想记住哪些"复选框"已被勾选,即使用户刷新页面或关闭浏览器并稍后返回.

我听说这localStorage是一个不错的选择,但我不确定如何在像我这样的情况下使用它.

目前我有这个代码:

team1 = {
    "information1": {
        "name": "tom",
        "age": "34"
    },
    "information2": {
        "name": "bob",
        "age": "20"
    },
};

team2 = {
    "information1": {
        "name": "betsy",
        "age": "27"
    },
    "information2": {
        "name": "brian",
        "age": "10"
    },
};

$(document).ready(function() {

    $("#displayObject1").on("click", function() {
        switchData(team1);
    });

    $("#displayObject2").on("click", function() {
        switchData(team2);
    });
    $("#table").on("click", ".on", function() {
        $(this).removeClass("on");
        $(this).addClass("off");
    });
    $("#table").on("click", ".off", function() {
        $(this).addClass("on");
        $(this).removeClass("off");
    });
}); 


function switchData(object) {
    $("#table").contents("div").remove();
    if (!('rows' in object)) {
        var rows = [];
        Object.keys(object).forEach(function (key) {
            if (key != 'rows') {
                rows.push($('
' + object[key].name + '
'));
            }
        });
        object.rows = rows;
    }
    object.rows.forEach(function (row) {
        $('#table').append(row);
    });
}

这使得行代表一个团队.当用户在浏览器会话期间查看不同的团队时,行将保留其颜色突出显示.

这是我的HTML:

    Display object 1



    Display object 2

还有一些CSS显示哪些列表项是"开"和"关".

.on {
  background-color: green;
}
.off {
  background-color: red;
}

页面如何记住颜色突出显示？