Получение всех элементов из одной группы из WebStorage

Question

Я хочу реализовать простую систему покупок на моем сайте с помощью WebStorage. Элементы представляют собой изображения с формат и сумма значения. Существует значение счетчика, которое содержит количество элементов, доступных в хранилище на данный момент, и каждый новый элемент добавляется в WebStorage в этом формате:

item<id> = 1:3,5 

Теперь у меня есть проблема с перечислением элементов из хранилища. Например, если пользователь покупает 5 пунктов и удаляет item0 и item3 (item -= 2), я бы не быть в состоянии получить все значения с простым циклом, даже если я проверить, если элемент существует в хранилище:

var len = parseInt(localStorage.getItem("items")); 
for (let i = 0; i < len; i++) { 
    if (localStorage.getItem("item" + i)) { 
     // show element on the page 
    } 
} 

Len будет три, но я все равно буду иметь item5, который не будет показан.

Должен ли я создавать новый массив идентификаторов элементов и удалять идентификаторы, поскольку элементы удаляются со страницы или есть лучший способ справиться с этим?

Answer 1

Лучше всего использовать объект JSON для обработки всего содержимого.

Ваш код будет выглядеть примерно так, чтобы установить данные:

// initial data 
var cartData = { 
    items: ['item1', 'item2', 'item3'] 
}; 

// stringify your object so it can be saved into localStorage 
localStorage.setItem('cart', JSON.stringify(cartData)); 

Затем вы можете легко удалить/цикл по элементам:

// get cart 
var cartData = JSON.parse(localStorage.getItem('cart')); 

// delete 2nd item 
cartData.items.splice(1, 1); 

// loop through items 
for(var i = 0, l = cartData.items.length; i < l; i++) { 
    // do something with cartData.items[i] 
}