Javascript 如何在重新加载页面时显示所有选中的复选框？

我有一个问题：我的网站正在用javascript搜索复选框

$(function () {
    var $allELements           = $('.input-box');
    var $selectedElementsListing = $('#selectedElements');
    var $selectedElementsLabel   = $('#selectedElementsLabel');
    var $elementInfo         = $('.elementInfo ');

    $allELements.on('click', function () {
        $selectedElementsListing .html(
            $allELements.filter(':checked').map(function (index, checkbox) {
                return '<div>' + checkbox.title + '</div>';
            }).get().join('')
        );

        if ($selectedElementsListing .text().trim().length)
        {
            $selectedElementsListing .show();
            $selectedElementsLabel.show();
            $elementInfo.show();
        }
    });
});

$（函数（）{
变量$Allegements=$（'.input box'）；
变量$selectedElementsListing=$（“#selectedElements”）；
变量$selectedElementsLabel=$（'selectedElementsLabel'）；
变量$elementInfo=$（'.elementInfo'）；
$allegements.on（'click'，函数（）{
$selectedElementsListing.html(
$allegements.filter（“：checked”）.map（函数（索引，复选框）{
返回“”+复选框。标题+“”；
}).get（）.join（“”）
);
如果（$selectedElementsListing.text（）.trim（）.length）
{
$selectedElementsListing.show（）；
$selectedElementsLabel.show（）；
$elementInfo.show（）；
}
});
});

因此，它在我的主页上搜索复选框，并在左下方列出复选框的名称（作为用户的信息）。 我的HTML如下所示：

<div class="elementInfo" >
        <p>
            <strong id="selectedElementsLabel" ><u>Ausgewählte
                Magazine:</u></strong><br />
            <span id="selectedElements"></span>
        </p>
</div>

Ausgewählte
杂志：

并从该输入字段中获取复选框名称：

<input class="input-box" title="[[ElementName]]" type="checkbox" id="A[[ID]]" name="ID[]"
                                       value="[[ID]]" checked="[[checked_element]]" />

---

按“重新加载”时，所选复选框的信息栏不会出现。只有当我再次按下复选框中的任何一个时，它才会显示选中的复选框（然后它会显示所有选中的复选框）

每次刷新页面时，DOM都会重新呈现，并且任何位置都不会存储任何状态。要保留复选框的状态，可以使用localStorage存储选中状态，然后在页面加载时，可以读取localStorage并执行通过检查本地存储数据来检查复选框的函数

// call this every time someone checks a box
window.localStorage.setItem('some key name of data', 'some data structure with checkbox state')

//Do this every time page is loaded
window.localStorage.getItem('previously used key name')

另外，我假设您不会在每次有人检查您保存状态的框时都调用后端api

欲了解更多信息，请 好的读物