Question

我正在建立一个工作场所。

它由四个页面组成，它们的结构完全相同，但内容不同。

结构为three columns，第一个为垂直series of check boxes，第二个为logo，第三个为另一个垂直series of check boxes。

goal是

能够转到第一页，单击所需的复选框，并在刷新时保持选中这些复选框。
然后，您应该可以单击第二页的链接，并拥有一组全新的复选框。

内容在那里，链接在那里，所有复选框都在那里并且在刷新时保留。

我遇到的问题是，当我在第一页上选中几个框然后单击到第二页的链接时，same check boxes仍然被选中，即使它是一个全新的页面和新内容

我尝试将四个页面中的每个页面链接到各自的JavaScript文件，但没有任何改变。我是开发新手，不知道下一步该怎么做。

这是我正在使用的JavaScript代码：

jQuery(function(){
    if (localStorage.input) {
        var checks = JSON.parse(localStorage.input);
        jQuery(':checkbox').prop('checked', function(i) {
            return checks[i];
        });
    }
});

jQuery(':checkbox').on('change', function() {
    localStorage.input = JSON.stringify(jQuery(':checkbox').map(function() {
        return this.checked;
    }).get());
});

如果它是一个页面的站点，则效果很好，但是当我访问其他页面之一时，复选框也不会刷新。

如果有人可以，请帮助我。

Answer 1

您要在每个页面的input的{{1}}中存储复选框信息。数据只是localStorage / true值的数组，指示是否选中页面上的复选框。

如果您在另一个带有复选框的页面上运行此代码，则它们将进入该状态。

您需要以一种识别信息的方式存储信息，例如

false

或

localStorage[window.location.href] = ...

您还可以根据复选框的名称/ id存储复选框的状态，以避免将状态与页面上各框的顺序联系起来，例如

localStorage.setItem(window.location.href, ...)

一页上的复选框已转移到新页面

1 个答案: