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

Question

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

item<id> = 1:3,5

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

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

Лен будет три, но я все еще буду иметь 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]
}