jeudi 23 novembre 2017

Local storage used with pagination

I have multiple pages of checkboxes, and I need to store these values within local storage so that I can submit all of the checked checkboxes in a form, e.g.

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

My problem arises when the user selects a checkbox on page 1, and then navigates to page 2 and selects another checkbox. I am currently storing the checkbox values, however when I navigate to page to another page, the local storage values are overwritten with the new set of checkbox values. This is because I was previously storing them in the same local storage item.

I have worked around this by storing the checkboxes in different local storage items by adding the current page number to the name of the local storage item, like so:

// Get current page number
var pageNumber = ;

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

The issue with the above is when it comes to retrieving the info so that I can submit it through a form, as I need to combine an infinite number of local storage items for the infinite number of pages. How therefore do I loop through each of the local storage items that start with brochureArrs so that I can combine them into one?

Apologies for the possibly long-winded explanation to a potentially simple problem!




Aucun commentaire:

Enregistrer un commentaire