与分页一起使用的本地存储

Question

我有多页复选框，我需要将这些值存储在本地存储中，以便我可以在表单中提交所有选中的复选框，例如

Page 1:
- Checkbox 1: checked
- Checkbox 2: unchecked
- Checkbox 3: unchecked

Page 2:
- Checkbox 1: unchecked
- Checkbox 2: checked
- Checkbox 3: checked

Form submission:
- Page 1 Checkbox 1 Value
- Page 2 Checkbox 2 Value
- Page 2 Checkbox 3 Value

当用户在第 1 页上选择一个复选框，然后导航到第 2 页并选择另一个复选框时，就会出现我的问题。我目前正在存储复选框值，但是当我导航到另一个页面时，本地存储值将被新的复选框值集覆盖。这是因为我之前将它们存储在同一个本地存储项中。

我已经通过将当前页码添加到本地存储项的名称来将复选框存储在不同的本地存储项中来解决此问题，如下所示：

// Get current page number
var pageNumber = {{ pageNumber }};

// Retrieve local storage
var brochureArrs = JSON.parse(localStorage.getItem('brochureArrs' + pageNumber));

上述问题在于检索信息以便我可以通过表单提交它，因为我需要为无限数量的页面组合无限数量的本地存储项目。因此，如何循环访问以 brochureArrs 开头的每个本地存储项，以便将它们组合成一个？

对于可能对一个可能很简单的问题可能冗长的解释表示歉意！

Answer 1

我不知道您的确切情况，但如果您谈论的是分页数据列表，其中每个复选框代表一个项目，我认为提交唯一 ID 的列表比提交一个更可取的 ID:s，而不是值来自它们在列表中的相对位置。 IE。如果选择了“第 20 项”，则存储 20，而不是 Page 2 Item 10，因为 a) 在覆盖方面没有同样的问题，并且 b) 在将来实现自定义排序和过滤时可以避免出现问题，并且不再可以依赖列表位置。

但是，如果您的情况不同，那么使用页面和列表索引当然是有意义的。因此，为了获得更直接的答案，您可以使用Object.keys 轻松枚举以borchureArrs 开头的所有存储项：

var pageKeys = Object.keys(localStorage).filter(key => key.indexOf('brochureArrs') === 0);

这将生成localStorage 中以brochureArrs 开头的所有键的列表。如果这些键的值都是数组，你可以像这样组合它们：

var values = Array.prototype.concat.apply([], pageKeys.map(key => JSON.parse(localStorage[key])));

Fiddle